/* rrusyniak.eu look for Roundcube elastic.
   One idea: the mail is a sheet of frosted glass over your photo; an empty pane is a clear window. */

@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(fonts/geologica-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(fonts/geologica-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(fonts/geologica-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(fonts/geologica-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --rr-accent: #4a6d8c;
  --rr-c1: #2d3540;
  --rr-c2: #15191e;
  --rr-glass: rgba(246, 247, 248, .72);
  --rr-glass-solid: rgba(251, 251, 252, .96);
  --rr-ink: #1b1f24;
  --rr-muted: #5c6570;
  --rr-hair: rgba(27, 31, 36, .07);
  --rr-edge: rgba(255, 255, 255, .45);
  --rr-tint: color-mix(in srgb, var(--rr-accent) 13%, transparent);
  --rr-glass-phone: rgba(246, 247, 248, .58);
  --rr-row: rgba(248, 249, 250, .80);
  --rr-gap: 12px;
  --rr-r: 22px;
  --rr-font: 'Geologica', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html.dark-mode {
  --rr-glass: rgba(20, 22, 26, .62);
  --rr-glass-solid: rgba(22, 24, 28, .94);
  --rr-glass-phone: rgba(18, 20, 24, .5);
  --rr-row: rgba(20, 22, 26, .74);
  --rr-ink: #e8ebee;
  --rr-muted: #97a0aa;
  --rr-hair: rgba(255, 255, 255, .07);
  --rr-edge: rgba(255, 255, 255, .08);
  --rr-tint: color-mix(in srgb, var(--rr-accent) 30%, transparent);
}

html, body, input, textarea, select, button, .btn, .form-control, .popupmenu, .ui-dialog {
  font-family: var(--rr-font);
}
body { background: var(--rr-c2); color: var(--rr-ink); }

/* ---------- ambient photo */
#rr-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--rr-c2); }
#rr-bg .rr-layer {
  position: absolute; inset: -80px;
  background: var(--rr-blur, none) center / cover no-repeat;
  filter: blur(34px) saturate(1.25);
  opacity: 0; transition: opacity 1.6s ease;
}
#rr-bg .rr-layer.on { opacity: 1; }
#rr-bg .rr-veil { position: absolute; inset: 0; background: rgba(10, 12, 16, .18); }
html.dark-mode #rr-bg .rr-veil { background: rgba(6, 7, 9, .45); }

/* ---------- desktop / tablet: floating panes */
@media screen and (min-width: 769px) {
  #layout { background: transparent; padding: var(--rr-gap); gap: var(--rr-gap); box-sizing: border-box; }

  #layout-menu {
    background: rgba(12, 14, 18, .34);
    backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border-radius: var(--rr-r); border: 1px solid rgba(255, 255, 255, .08);
  }
  #layout-sidebar, #layout-list, #layout-content {
    background: var(--rr-glass);
    backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid var(--rr-edge); border-radius: var(--rr-r);
    overflow: hidden; box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .45);
  }
  #layout-content { background: var(--rr-glass-solid); }
  #layout-sidebar, #layout-list { border-right: 1px solid var(--rr-edge); }
}

/* the empty pane turns into a clear window onto the photo */
#layout-content .rr-window { display: none; }
@media screen and (min-width: 769px) {
  html #layout-content.rr-empty {
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-color: transparent !important; box-shadow: none !important;
  }
  #layout-content.rr-empty > :not(.rr-window) { visibility: hidden; }
  #layout-content.rr-empty .rr-window {
    display: block; position: absolute; inset: 0; margin: 0;
  }
  #layout-content { position: relative; }
  .rr-window img {
    position: absolute; inset: 28px; width: calc(100% - 56px); height: calc(100% - 56px);
    object-fit: contain; object-position: center;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35));
    transition: opacity 1.6s ease; border-radius: 14px;
  }
  .rr-window img.next { opacity: 0; }
  .rr-window img.now { opacity: 1; }
  .rr-window img:not([src]) { visibility: hidden; }
  .rr-shuffle {
    position: absolute; right: 22px; bottom: 18px;
    font: 500 13px/1 var(--rr-font); color: #fff; cursor: pointer;
    padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(10, 12, 16, .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0; transition: opacity .25s ease;
  }
  .rr-window:hover .rr-shuffle, .rr-shuffle:focus-visible { opacity: 1; }
  .rr-shuffle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}

/* ---------- headers and toolbars sit on the glass, no bars */
#layout .header, #layout .footer, #layout .searchbar, #messagelist-header, .header .toolbar,
#layout-content > .header, #layout-content .footer, .listing thead, #messagelist thead tr th {
  background: transparent !important; border-color: var(--rr-hair) !important;
}
#layout .header { border-bottom: 1px solid var(--rr-hair); }
.header-title { font-weight: 600; letter-spacing: -.01em; color: var(--rr-ink); }
#layout-sidebar .header-title.username { font-weight: 500; color: var(--rr-muted); }
#layout .searchbar { border-radius: 999px; background: rgba(127, 127, 127, .09) !important; }

/* ---------- task menu: quiet icons on smoked glass, compose is the one coloured thing */
html #taskmenu a, html #taskmenu .special-buttons a { color: rgba(255, 255, 255, .78); border-radius: 14px; background: transparent; }
#taskmenu a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
html #taskmenu a.selected { color: #fff; background: rgba(255, 255, 255, .14); }
html #taskmenu a.compose { color: #fff; background: var(--rr-accent); }
#taskmenu a.compose:hover { background: color-mix(in srgb, var(--rr-accent) 85%, #fff); }
#layout-menu .popover-header, #layout-menu #logo, #layout-menu img#logo { display: none; }
#layout-menu #taskmenu .special-buttons, #layout-menu #taskmenu { background: transparent !important; }
@media screen and (min-width: 769px) {
  /* icons only; the names stay available to screen readers and as tooltips */
  #layout-menu { width: 64px; min-width: 64px; }
  html #taskmenu a { width: 44px !important; height: 44px; margin: 6px auto !important; padding: 0; display: flex; align-items: center; justify-content: center; }
  html #taskmenu a.compose { margin: 7px auto 18px !important; }
  html #taskmenu .special-buttons { display: flex; flex-direction: column; align-items: center; width: 100%; }
  #taskmenu a::before { margin: 0 !important; font-size: 17px; line-height: 1; }
  #taskmenu a .inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html #taskmenu a.compose { width: 44px !important; height: 44px !important; min-width: 0; border-radius: 50%; margin: 7px auto 18px; box-shadow: 0 10px 24px -10px var(--rr-accent); }
  #taskmenu .special-buttons { padding-bottom: 8px; }
}

/* ---------- folders */
#mailboxlist li a, .listing li a { border-radius: 12px; }
.treelist li a, .listing li a { color: var(--rr-ink); }
html .listing:not(.treelist) li.selected, html .listing:not(.treelist) li.selected > a,
html table.listing tr.selected td {
  background-color: var(--rr-tint) !important; color: var(--rr-ink) !important;
}
html .listing:not(.treelist) li { border-color: var(--rr-hair) !important; }
html .listing:not(.treelist) li > a:hover { background-color: rgba(127, 127, 127, .08); }
#mailboxlist li.selected > a { background: var(--rr-tint) !important; color: var(--rr-ink) !important; font-weight: 500; }
#mailboxlist li a:hover { background: rgba(127, 127, 127, .10); }
#mailboxlist li { border: 0 !important; }
#mailboxlist li a { margin: 1px 10px; width: auto !important; box-sizing: border-box; }
.unreadcount, #mailboxlist .unreadcount {
  background: var(--rr-accent) !important; color: #fff !important; border-radius: 999px; font-weight: 500;
}

/* ---------- message list */
#messagelist tr td, table.listing tr td { border-color: var(--rr-hair) !important; background: transparent; }
#messagelist tbody tr { transition: background-color .15s ease; }
#messagelist tbody tr:hover td { background: rgba(127, 127, 127, .07) !important; }
#messagelist tbody tr.selected td, #messagelist tbody tr.focused.selected td {
  background: var(--rr-tint) !important; color: var(--rr-ink) !important;
}
#messagelist tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--rr-accent); }
#messagelist tr td.subject span.subject a, #messagelist .subject a { color: var(--rr-ink); }
#messagelist tr.unread td.subject span.subject a { font-weight: 600; }
#messagelist tr:not(.unread) td.subject span.subject a { font-weight: 400; }
#messagelist span.msgicon.status.unread::before, #messagelist span.msgicon.unread::before { color: var(--rr-accent) !important; }
#messagelist span.fromto, #messagelist span.date, #messagelist td.date, #messagelist .size { color: var(--rr-muted) !important; }
#messagelist tr.unread span.fromto { color: var(--rr-ink) !important; font-weight: 500; }
#messagelist tr.flagged td, #messagelist tr.flagged td a { color: inherit; }
#messagelist tr.flagged span.flag::before, #messagelist tr.flagged .flagged a { color: var(--rr-accent) !important; }

/* ---------- controls: accent instead of elastic blue */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary.disabled, .btn-primary:disabled,
.floating-action-buttons a.button, .ui-dialog .ui-dialog-buttonpane .btn-primary {
  background-color: var(--rr-accent) !important; border-color: var(--rr-accent) !important; color: #fff !important;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn, .form-control, .custom-select, input.form-control, .input-group > .form-control {
  border-radius: 12px;
}
.form-control:focus, .custom-select:focus, input:focus, textarea:focus {
  border-color: var(--rr-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rr-accent) 25%, transparent) !important;
}
a, .formlinks a, .propform a, .link { color: var(--rr-accent); }
:focus-visible { outline: 2px solid var(--rr-accent); outline-offset: 2px; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before,
input.form-check-input:checked, .custom-control-input:checked + label::before {
  background-color: var(--rr-accent) !important; border-color: var(--rr-accent) !important;
}
.popupmenu, .popover, .ui-dialog, .ui-dialog.popupmenu {
  border-radius: 16px !important; border: 1px solid var(--rr-hair) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45) !important; overflow: hidden;
}
.popupmenu .listing li a, .popover .listing li a { border-radius: 10px; }

/* ---------- phone: the photo itself is the backdrop, sharp; lists float over it on translucent rows */
@media screen and (max-width: 768px) {
  #layout { background: transparent; }
  #rr-bg .rr-layer { inset: 0; filter: none; }
  #rr-bg .rr-veil { background: linear-gradient(to bottom, rgba(10, 12, 16, .10), rgba(10, 12, 16, 0) 40%, rgba(10, 12, 16, .12)); }
  html.dark-mode #rr-bg .rr-veil { background: rgba(6, 7, 9, .28); }

  #layout-sidebar, #layout-list {
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0;
  }
  #layout-content { background: var(--rr-glass-solid) !important; border: 0; }

  /* bars stay frosted so titles and buttons read on any photo */
  #layout-sidebar > .header, #layout-list > .header, #layout-list .searchbar,
  #layout-list .pagenav, #layout-sidebar .footer {
    background: var(--rr-row) !important;
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  }
  #layout-list .searchbar { margin: 8px 10px; border-radius: 14px; }
  #messagelist-content, #folderlist-content { background: transparent !important; }

  /* rows: translucent, the photo shows through them and fully below the list */
  #messagelist tbody tr td { background: var(--rr-row) !important; }
  #messagelist tbody tr.selected td { background: color-mix(in srgb, var(--rr-accent) 22%, var(--rr-row)) !important; }
  #messagelist tbody tr.focused:not(.selected) td { background: var(--rr-row) !important; }
  #messagelist tbody tr td.flags, #messagelist tbody tr.focused td.flags, #messagelist tbody tr.selected td.flags {
    background: transparent !important;  /* overlays the date on touch layouts */
  }
  #mailboxlist > li > a, #settings-menu li a, .listing:not(#messagelist) li > a {
    background: var(--rr-row); border-radius: 14px; margin: 4px 10px;
    width: auto; box-sizing: border-box;
  }
  #mailboxlist li.selected > a { background: color-mix(in srgb, var(--rr-accent) 24%, var(--rr-row)) !important; }

  /* slide-out menu: smoked glass, plain rows, one coloured action */
  #layout-menu { background: rgba(14, 16, 20, .86) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 0; border-radius: 0 22px 22px 0; }
  #layout-menu .popover-header { background: transparent !important; border: 0 !important; }
  html #taskmenu a, html #taskmenu .special-buttons a {
    border: 0 !important; border-radius: 14px; margin: 2px 10px; padding-left: 14px;
    color: rgba(255, 255, 255, .85); background: transparent !important;
  }
  html #taskmenu a.selected { background: rgba(255, 255, 255, .12) !important; color: #fff; }
  html #taskmenu a.compose { background: var(--rr-accent) !important; color: #fff; margin: 6px 10px 12px; }
  html #taskmenu a.logout { color: #ff8a80; }
  .floating-action-buttons a.button { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
}

/* ---------- login: no photos here, only the colours of the current one */
body.task-login, body.task-logout {
  background:
    radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--rr-c1) 90%, #fff 10%) 0%, transparent 60%),
    radial-gradient(110% 90% at 90% 100%, color-mix(in srgb, var(--rr-accent) 55%, var(--rr-c2)) 0%, transparent 65%),
    var(--rr-c2) !important;
  min-height: 100vh;
}
body.task-login #layout, body.task-logout #layout, body.task-login #layout-content, body.task-logout #layout-content {
  background: transparent !important; border: 0; box-shadow: none; backdrop-filter: none;
}
body.task-login #layout-content > .header, body.task-login #login-footer, body.task-logout #login-footer { display: none; }
#login-form {
  max-width: 380px; margin: 0 auto; padding: 36px 32px 28px;
  background: rgba(250, 250, 251, .86);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
html.dark-mode #login-form { background: rgba(22, 24, 28, .8); border-color: rgba(255, 255, 255, .08); }
body.task-login #logo, body.task-logout #logo { display: none; }
#login-form::before {
  content: 'rrusyniak'; display: block;
  font: 600 36px/1 var(--rr-font); letter-spacing: -.04em; color: var(--rr-ink);
}
#login-form::after {
  content: 'пошта'; position: absolute; top: 44px; right: 32px;
  font: 400 14px/1 var(--rr-font); color: var(--rr-muted);
}
#login-form { position: relative; top: auto !important; }
#login-form table { width: 100%; margin-top: 26px; }
#login-form table, #login-form td, #login-form tr { background: transparent !important; display: block; padding: 0; }
#login-form tr.form-group { margin: 0 0 10px; }
#login-form .input-group-prepend { display: none; }
#login-form input.form-control {
  height: 48px; border-radius: 14px !important; font-size: 16px; padding: 0 16px;
  background: rgba(127, 127, 127, .10); border: 1px solid transparent; color: var(--rr-ink);
}
#login-form input.form-control::placeholder { color: var(--rr-muted); }
#login-form .formbuttons { margin: 16px 0 0; padding: 0; }
#login-form .formbuttons button, #login-form #rcmloginsubmit {
  width: 100%; height: 48px; border-radius: 14px; font-weight: 500; font-size: 16px;
  text-transform: none; letter-spacing: 0;
}
#login-form + #login-footer, #login-footer, body.task-login .noscriptwarning { display: none; }
body.task-login #layout-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 16px; box-sizing: border-box; }
body.task-login #layout-content > #login-form { margin: auto; width: 100%; box-sizing: border-box; text-align: left; }
#login-form td.input, #login-form .input-group { display: flex !important; width: 100%; }
#login-form td.input input.form-control { flex: 1 1 auto; width: 100% !important; max-width: none; }
#login-form .formbuttons button, #login-form #rcmloginsubmit, .btn { text-transform: none !important; }
.btn { text-transform: none; letter-spacing: 0; }



/* ---------- proportions: narrow folders, comfortable list, the rest belongs to the window */
@media screen and (min-width: 1201px) {
  body.task-mail.action-none #layout-sidebar { flex: 0 0 230px !important; max-width: 230px; min-width: 200px; }
  body.task-mail.action-none #layout-list { flex: 0 0 380px !important; max-width: 38%; min-width: 300px; }
  body.task-mail.action-none #layout-content { flex: 1 1 auto !important; }
  /* list toolbar: icons only, names in tooltips */
  #messagelist-header a .inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #messagelist-header .toolbar a, #messagelist-header a.toolbar-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 !important; margin: 0 2px; border-radius: 10px;
  }
  #messagelist-header .toolbar a::before, #messagelist-header a.toolbar-button::before { margin: 0 !important; line-height: 1; }
  #messagelist-header .toolbar a:hover, #messagelist-header a.toolbar-button:hover { background: rgba(127, 127, 127, .12); }
  #messagelist-header .toolbar { display: flex; align-items: center; height: 100%; }
}

/* ---------- inside the reading pane (framed documents) */
body.iframe, html.iframe body, body.iframe #layout-content { background: transparent !important; }
#layout-content iframe { background: transparent; }
body.iframe .header, body.iframe #layout-content > .header { background: transparent !important; border-color: var(--rr-hair) !important; }
#messagebody div.pre, #messagebody .pre, .message-part div.pre {
  font-family: var(--rr-font) !important; font-size: 15px; line-height: 1.6; max-width: 72ch;
}
#message-header .subject, #message-header h2.subject { font-weight: 600; letter-spacing: -.015em; }
#message-header .header-headers, #message-header .header-links a { color: var(--rr-muted); }

@media screen and (min-width: 1201px) {
  /* content toolbars: icons only, the names stay as tooltips */
  #layout-content > .header .toolbar a .inner, body.iframe .header .toolbar a .inner {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  #layout-content > .header .toolbar a, body.iframe .header .toolbar a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 !important; margin: 0 1px; border-radius: 10px;
  }
  #layout-content > .header .toolbar a::before, body.iframe .header .toolbar a::before { margin: 0 !important; line-height: 1; }
  #layout-content > .header .toolbar a:hover, body.iframe .header .toolbar a:hover { background: rgba(127, 127, 127, .12); }
  #layout-content > .header .toolbar .dropbutton { display: inline-flex; align-items: center; }
}

/* row hover actions */
#messagelist tr .flags, #messagelist tr td.flags, #messagelist tbody tr:hover td.flags {
  background: transparent !important;
}
.listing-hover-menu {
  background: var(--rr-glass-solid) !important; border-radius: 10px; color: var(--rr-muted);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
html #taskmenu .special-buttons a:not(:hover), html #taskmenu a:not(.selected):not(.compose):not(:hover) { background: transparent !important; }
html #taskmenu a.compose::before, html #taskmenu a.compose .inner { color: #fff !important; }

/* read messages carry no marker; only unread, replied and forwarded do */
#messagelist span.msgicon.status:not(.unread):not(.replied):not(.forwarded):not(.unread_children)::before { visibility: hidden; }

@media screen and (min-width: 1201px) {
/* ---------- alignment: toolbar buttons sit in <li>s that span the header height */
#layout .header .toolbar, body.iframe .header .toolbar { display: flex; align-items: center; height: 100%; }
#layout .header .toolbar > li, body.iframe .header .toolbar > li { display: flex; align-items: center; height: 100%; }
#layout .header, body.iframe .header { align-items: center; }
/* a menu caret belongs to its button */
#layout .header .toolbar .dropbutton { gap: 0; }
#layout .header .toolbar .dropbutton a.dropdown, body.iframe .header .toolbar .dropbutton a.dropdown {
  min-width: 14px !important; width: 16px !important; margin-left: -8px !important; border-radius: 6px;
}
#layout .header .toolbar .dropbutton a.dropdown::before { font-size: 10px; }
}
/* search field floats inside the pane instead of touching its edges */
#layout-list .searchbar, #layout-sidebar .searchbar { margin: 6px 10px 8px; width: auto; }
/* row hover actions: compact */
.listing-hover-menu .txt { display: none; }
@media screen and (min-width: 1201px) {
/* header icon buttons (folder options ⋮, back arrows): glyph centred in a proper hit area */
#layout .header > a.button.icon {
  align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0 !important; margin: 0 6px; border-radius: 10px; line-height: 1;
}
#layout .header > a.button.icon::before { margin: 0 !important; line-height: 1 !important; height: auto; }
#layout .header > a.button.icon:hover { background: rgba(127, 127, 127, .12); }
#layout-sidebar .header > a.sidebar-menu { display: flex; }
}
html .listing-hover-menu span.txt { display: none !important; }
.btn-link, a.btn-link, .formbuttons a.extwin, a.extwin { color: var(--rr-accent) !important; }

/* ---------- motion: only where it shows what changed */
@keyframes rr-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rr-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes rr-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes rr-settle { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

body.task-login #login-form { animation: rr-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
#layout-content iframe.rr-in { animation: rr-rise .24s cubic-bezier(.2, .8, .2, 1); }
#layout-content.rr-empty .rr-window { animation: rr-settle .5s cubic-bezier(.2, .8, .2, 1); }
.popupmenu, .popover, .ui-dialog { animation: rr-fade .14s ease-out; }  /* opacity only: Popper owns transform */
.btn, #taskmenu a, .floating-action-buttons a, .rr-shuffle, #messagelist-header a, #layout-content > .header a {
  transition: transform .12s ease, background-color .15s ease, color .15s ease, filter .15s ease;
}
.btn:active, #taskmenu a:active, .floating-action-buttons a:active, .rr-shuffle:active { transform: scale(.96); }
#mailboxlist li a, .listing li a { transition: background-color .15s ease; }
@media screen and (max-width: 768px) {
  /* a pane that comes into view slides in; the slide-out menu comes from the edge */
  #layout-list, #layout-content, #layout-sidebar { animation: rr-in-right .26s cubic-bezier(.2, .8, .2, 1); }
  #layout-menu { animation: rr-in-left .28s cubic-bezier(.2, .8, .2, 1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- reading: nothing wider than the pane */
#messagebody { overflow-x: hidden; }
#messagebody img, #messagebody video { max-width: 100% !important; height: auto !important; }
#messagebody .message-part, #messagebody .message-htmlpart { overflow-wrap: anywhere; }
/* Roundcube already turns plain-text line breaks into <br>, so div.pre must not keep the newlines too */
#messagebody div.pre { white-space: normal !important; overflow-wrap: anywhere; }
#messagebody pre { white-space: pre-wrap !important; overflow-wrap: anywhere; }
#message-header, #message-header .subject, #message-header .header-summary { overflow-wrap: anywhere; min-width: 0; }
#messagebody .message-partheaders, #messagebody fieldset { max-width: 100%; box-sizing: border-box; }

/* medium widths: the reading toolbar keeps its buttons but drops the (truncated) captions */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  #layout-content > .header .toolbar a .inner, body.iframe .header .toolbar a .inner {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  #layout-content > .header .toolbar a::before, body.iframe .header .toolbar a::before { margin: 0 !important; }
  #layout-content > .header .toolbar a { min-width: 36px; }
  #layout-content > .header .toolbar .dropbutton a.dropdown { min-width: 14px !important; width: 16px !important; margin-left: -8px !important; }
}