/* ==========================================================================
   QYVERIX MAIL — Gmail-shaped layer over Roundcube Elastic
   --------------------------------------------------------------------------
   Gmail's look is geometry more than colour: a grey page with white rounded
   panes floating on it, right-rounded folder pills, a fat pill search field,
   a big rounded Compose action, and message rows that show an avatar, the
   sender and the time on one line with the subject indented underneath.
   This file reproduces that over Elastic, keeping the Qyverix violet and
   gold so it still reads as our product rather than a Gmail copy.

   Loaded after qyverix.css, which keeps the brand accents and the login
   screen. Elastic puts a screen-size class on <html> — layout-phone,
   layout-small, layout-normal, layout-large — and row geometry is written
   against those so it always agrees with the skin's own JavaScript.
   ========================================================================== */

:root {
  --g-bg:        #f6f8fc;   /* page behind the panes */
  --g-surface:   #ffffff;   /* the panes themselves */
  --g-read:      #f2f6fc;   /* an already-read row */
  --g-ink:       #202124;
  --g-ink-2:     #5f6368;   /* secondary text: subjects, dates */
  --g-line:      #e4e7ec;
  --g-hover:     #eef1f7;
  --g-accent:    #673de6;   /* Qyverix violet, in place of Gmail blue */
  --g-accent-2:  #8b5cf6;
  --g-soft:      #ece5ff;   /* selected fill */
  --g-gold:      #c8a24b;
  --g-radius:    16px;
  --g-shadow-1:  0 1px 2px 0 rgba(60,64,67,.28), 0 1px 3px 1px rgba(60,64,67,.12);
  --g-shadow-2:  0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.12);
}

/* ------------------------------------------------------------- app shell -- */

body.task-mail,
body.task-addressbook,
body.task-settings,
body.task-mail #layout,
body.task-addressbook #layout,
body.task-settings #layout { background: var(--g-bg) !important; }

#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--g-surface) !important;
  border-right: 0 !important;
}

/* The panes become cards floating on the grey page. */
html.layout-large #layout-list,
html.layout-normal #layout-list,
html.layout-large #layout-content,
html.layout-normal #layout-content {
  border-radius: var(--g-radius) !important;
  margin: 8px 8px 8px 0 !important;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--g-line);
}

html.layout-large #layout-sidebar,
html.layout-normal #layout-sidebar {
  background: transparent !important;
  box-shadow: none !important;
}

/* A little more room for the list than Elastic's 30%, so two-line rows
   breathe the way they do in Gmail's split view. */
html.layout-large #layout-list {
  flex: 4 !important;          /* Elastic ships 3; sidebar 2, content 6 */
  max-width: 40% !important;
}

/* --------------------------------------------------------- the task rail -- */
/* Gmail's rail is light, not a dark chrome bar. This also overrides the
   earlier violet gradient from qyverix.css. */

#layout-menu,
#taskmenu,
.task-menu,
#layout > .menu,
#layout-menu .popover-header,
#taskmenu .special-buttons,
#taskmenu .action-buttons {
  background: var(--g-bg) !important;
  background-image: none !important;
  border-right: 0 !important;
}

#layout-menu .popover-header { border-bottom: 0 !important; }
/* The drawer's close button is white, which was fine over the old dark rail
   and invisible over this one. */
#layout-menu .popover-header a.cancel,
#layout-menu .popover-header a.cancel:before,
#layout-menu .popover-header a.cancel .inner { color: var(--g-ink-2) !important; }
#layout-menu .popover-header a.cancel:hover,
#layout-menu .popover-header a.cancel:hover:before { color: var(--g-ink) !important; }
#taskmenu .special-buttons {
  border: 0 !important;
  box-shadow: none !important;
}

#taskmenu a,
#taskmenu a.button,
#taskmenu .special-buttons a {
  color: var(--g-ink-2) !important;
  border-radius: 14px !important;
  margin: 2px 8px;
  transition: background .12s, color .12s;
}
#taskmenu a:hover,
#taskmenu a.button:hover,
#taskmenu .special-buttons a:hover {
  background: var(--g-hover) !important;
  color: var(--g-ink) !important;
}
#taskmenu a.selected,
#taskmenu a.button.selected,
#taskmenu a.selected *,
#taskmenu a.button.selected * {
  background: var(--g-soft) !important;
  color: var(--g-accent) !important;
  box-shadow: none !important;
  font-weight: 600;
}
#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.logout * { color: #c5221f !important; }
#taskmenu .special-buttons a.logout:hover { background: #fdecea !important; }

/* Compose: the one unmistakably Gmail control. It appears in two very
   different places, so it gets two shapes.
     - the narrow icon rail on a desktop: Gmail's collapsed form, a rounded
       violet tile with the pencil over a small label
     - the slide-out drawer on a phone: Gmail's expanded form, a wide pill
       with the pencil and the word side by side
   The floating action button on phones is a separate element Elastic clones
   into .floating-action-buttons; it is styled further down. */
#taskmenu .action-buttons a.compose,
#taskmenu a.compose {
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2)) !important;
  color: #fff !important;
  box-sizing: border-box !important;
  overflow: hidden;
  border-bottom: 0 !important;
  box-shadow: var(--g-shadow-1) !important;
  transition: box-shadow .18s, filter .18s;
}
#taskmenu .action-buttons a.compose:hover,
#taskmenu a.compose:hover {
  box-shadow: var(--g-shadow-2) !important;
  filter: brightness(1.06);
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2)) !important;
}
#taskmenu .action-buttons a.compose *,
#taskmenu a.compose * { color: #fff !important; }

/* narrow rail */
html.layout-large #taskmenu a.compose,
html.layout-normal #taskmenu a.compose {
  /* the rail is only ~78px, so the tile is sized to it and clips nothing */
  width: calc(100% - 18px) !important;
  max-width: calc(100% - 18px) !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  text-align: center;
  margin: 8px 9px 12px !important;
  padding: 8px 2px !important;
}
html.layout-large #taskmenu a.compose .inner,
html.layout-normal #taskmenu a.compose .inner {
  font-size: 11px !important;
  letter-spacing: .01em;
}

/* the brand mark sitting above the rail */
#layout-menu .popover-header img,
#taskmenu .special-buttons img { filter: none !important; }

/* ------------------------------------------------------------ folder list -- */

#layout-sidebar > .header {
  background: transparent !important;
  border-bottom: 0 !important;
}
#layout-sidebar .header-title.username {
  font-weight: 600;
  color: var(--g-ink);
  letter-spacing: -.01em;
}

#mailboxlist li a,
.folderlist li a,
#folderslist li a {
  border-radius: 0 999px 999px 0 !important;
  margin: 1px 12px 1px 0 !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 14px;
  color: var(--g-ink) !important;
  transition: background .12s;
}
#mailboxlist li a:hover,
.folderlist li a:hover { background: var(--g-hover) !important; }

#mailboxlist li.selected > a,
.folderlist li.selected > a,
#mailboxlist li.selected > a *,
.folderlist li.selected > a * {
  background: var(--g-soft) !important;
  color: var(--g-accent) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Gmail shows the unread count as plain bold text, not a filled chip. */
#mailboxlist .unreadcount,
.folderlist .unreadcount {
  background: transparent !important;
  color: var(--g-ink) !important;
  font-weight: 700;
  font-size: 12.5px;
  padding: 0 4px !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
#mailboxlist li.selected .unreadcount { color: var(--g-accent) !important; }

/* ------------------------------------------------------------- search bar -- */
/* The whole bar becomes the pill, so the magnifier sits inside it the way
   Gmail's does, rather than floating alongside the field. */

#layout-list > .searchbar,
.searchbar.menu {
  background: #eaf0fb !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 999px !important;
  margin: 10px 12px 8px !important;
  padding: 0 8px !important;
  min-height: 46px;
  transition: background .15s, box-shadow .15s;
}
#layout-list > .searchbar:focus-within,
.searchbar.menu:focus-within {
  background: var(--g-surface) !important;
  box-shadow: var(--g-shadow-1) !important;
}

.searchbar input,
#mailsearchform,
#quicksearchbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 44px !important;
  font-size: 15px !important;
  color: var(--g-ink) !important;
  padding: 0 6px !important;
}
.searchbar input::placeholder { color: var(--g-ink-2) !important; opacity: 1; }
.searchbar a.button { color: var(--g-ink-2) !important; background: transparent !important; }
.searchbar a.button:hover { color: var(--g-accent) !important; }

/* --------------------------------------------------------- list pane chrome -- */

#messagelist-header.header,
#layout-list > .header,
#layout-content > .header {
  background: var(--g-surface) !important;
  border-bottom: 1px solid var(--g-line) !important;
  min-height: 52px;
}

#layout-list .toolbar a,
#layout-content .toolbar a,
#messagelist-header a.button {
  border-radius: 999px !important;
  color: var(--g-ink-2) !important;
  transition: background .12s, color .12s;
}
#layout-list .toolbar a:hover,
#layout-content .toolbar a:hover,
#messagelist-header a.button:hover {
  background: var(--g-hover) !important;
  color: var(--g-ink) !important;
}

#layout-list > .footer,
#layout-content > .footer,
.pagenav.footer {
  background: var(--g-surface) !important;
  border-top: 1px solid var(--g-line) !important;
}

#messagelist-content.scroller,
#folderlist-content.scroller { background: transparent !important; }

/* ------------------------------------------------------------ message rows -- */
/* Two lines, the way Gmail renders a list next to a reading pane: avatar on
   the left spanning both lines, sender and time on the first, subject
   indented underneath. The list column is far too narrow for a single line,
   so this is both the better-looking and the only honest choice. */

#messagelist { border-collapse: separate !important; }

#messagelist tbody tr.message {
  display: flex !important;
  align-items: flex-start;
  min-height: 62px;
  margin: 1px 8px;
  padding: 8px 6px 8px 2px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--g-read) !important;
  transition: background .1s, box-shadow .1s;
  position: relative;
}

#messagelist tbody tr.message > td {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
  font-size: 14px !important;
}

#messagelist tbody tr.message > td.threads { order: 0; flex: 0 0 auto; align-self: center; }
#messagelist tbody tr.message > td.flags   { order: 1; flex: 0 0 auto; align-self: center; padding: 0 4px !important; }

#messagelist tbody tr.message > td.subject {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: grid !important;
  /* avatar | status icon | sender/subject | date
     The icon column collapses to zero when the icon is hidden, and column
     gaps are zero so nothing is left behind when it does. */
  grid-template-columns: 44px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "av icon from date"
    "av icon subj subj";
  align-items: center;
  align-content: center;
  column-gap: 0;
  row-gap: 2px;
  padding-right: 4px !important;
}

#messagelist td.subject .qyx-avatar {
  grid-area: av;
  align-self: start;
  margin: 1px 10px 0 0;
}

/* Unread is already obvious from the white row and the bold text, so the
   plain unread dot is redundant; the replied and forwarded arrows are not. */
#messagelist td.subject span.msgicon.status { display: none !important; }
#messagelist td.subject span.msgicon.status.replied,
#messagelist td.subject span.msgicon.status.forwarded {
  display: block !important;
  grid-area: icon;
  align-self: center;
  margin-right: 6px;
  color: var(--g-ink-2);
}

#messagelist td.subject span.fromto {
  grid-area: from;
  padding: 0 !important;
  font-size: 14px !important;
  color: var(--g-ink) !important;
  line-height: 1.35 !important;
}
#messagelist td.subject span.date {
  grid-area: date;
  justify-self: end;
  margin-left: 10px;
  font-size: 12px !important;
  color: var(--g-ink-2) !important;
  line-height: 1.35 !important;
}
#messagelist td.subject span.subject {
  grid-area: subj;
  width: auto !important;
  font-size: 13.5px !important;
  color: var(--g-ink-2);
  line-height: 1.35 !important;
}
#messagelist td.subject span.subject a { color: inherit !important; }
#messagelist td.subject span.size { display: none !important; }

/* unread rows: white card, bold text — Gmail's read/unread contrast */
#messagelist tbody tr.message.unread { background: var(--g-surface) !important; }
#messagelist tbody tr.message.unread td.subject span.subject,
#messagelist tbody tr.message.unread td.subject span.subject a,
#messagelist tbody tr.message.unread td.subject span.fromto,
#messagelist tbody tr.message.unread td.subject span.date {
  font-weight: 700 !important;
  color: var(--g-ink) !important;
}

#messagelist tbody tr.message:hover {
  background: var(--g-surface) !important;
  box-shadow: var(--g-shadow-1);
  z-index: 2;
}
#messagelist tbody tr.message.selected,
#messagelist tbody tr.message.selected:hover {
  background: var(--g-soft) !important;
  box-shadow: none;
}
#messagelist tbody tr.message.focused,
#messagelist tbody tr.message:focus,
#messagelist tbody tr.message.focused > td {
  outline: 0 !important;
  border-color: transparent !important;
}
#messagelist tbody tr.message.focused:not(.selected) { box-shadow: inset 0 0 0 2px var(--g-soft); }

/* star: quiet until it means something, then gold */
#messagelist td.flags span.flag:before { color: #c3c7ce; }
#messagelist td.flags span.flag:hover:before { color: var(--g-ink-2); }
#messagelist tr.flagged td.flags span:before,
#messagelist td.flags span.flagged:before { color: var(--g-gold) !important; }
#messagelist tr.flagged td,
#messagelist tr.flagged td.subject span.subject a,
#messagelist tr.flagged td.subject span.fromto { color: inherit !important; }

/* the sender chip the companion script inserts */
.qyx-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1 !important;
  color: #fff;
  text-transform: uppercase;
  user-select: none;
  flex: 0 0 auto;
}

/* ----------------------------------------------------------- reading pane -- */

#messageheader { background: var(--g-surface) !important; }

#messageheader .subject,
.message-partheaders .subject {
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em;
  color: var(--g-ink) !important;
}
#messagebody { font-size: 14.5px; line-height: 1.7; }

/* --------------------------------------------------------------- buttons -- */

.toolbar a.button.create,
a.button.create.compose,
button.btn-primary,
.button.primary,
a.button.send,
button.send { border-radius: 999px !important; }

/* ----------------------------------------------------------------- phone -- */

html.layout-phone #layout-list,
html.layout-small #layout-list,
html.layout-phone #layout-content,
html.layout-small #layout-content {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  max-width: none !important;
}

html.layout-phone #messagelist tbody tr.message,
html.layout-small #messagelist tbody tr.message {
  min-height: 68px;
  padding: 9px 6px;
}
html.layout-phone #messagelist td.subject span.fromto,
html.layout-small #messagelist td.subject span.fromto { font-size: 14.5px !important; }
html.layout-phone #messagelist td.subject span.subject,
html.layout-small #messagelist td.subject span.subject { font-size: 14px !important; }

html.layout-phone .searchbar.menu,
html.layout-small .searchbar.menu { margin: 8px 10px !important; }

/* The slide-out navigation drawer.
   Elastic styles its rows with `border-bottom: 1px solid #f1f3f4 !important`
   and floats every icon left with `float: left !important`. Both were built
   for the old dark rail: on a light drawer the hairlines read as clutter,
   and the floated pencil combined with a centred label left Compose looking
   like two unrelated things. Undo both, and make the rows the same
   right-rounded pills as the folder list. */
html.layout-phone #taskmenu a,
html.layout-small #taskmenu a,
html.layout-phone #taskmenu .special-buttons a,
html.layout-small #taskmenu .special-buttons a {
  border-bottom: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  margin: 2px 14px 2px 0 !important;
  padding: 0 .9rem !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 15px !important;
}
html.layout-phone #taskmenu a:before,
html.layout-small #taskmenu a:before {
  line-height: 48px !important;
  margin-right: .75rem !important;
}

/* Compose in the drawer: one row, pencil then word, aligned with the icons
   of the items below it. */
html.layout-phone #taskmenu a.compose,
html.layout-small #taskmenu a.compose {
  width: auto !important;
  max-width: none !important;
  border-radius: 999px !important;
  margin: 10px 14px 14px 10px !important;
  padding: 0 1.1rem !important;
  height: 54px !important;
  line-height: 54px !important;
  text-align: left !important;
  font-weight: 600;
}
html.layout-phone #taskmenu a.compose:before,
html.layout-small #taskmenu a.compose:before { line-height: 54px !important; }
html.layout-phone #taskmenu a.compose .inner,
html.layout-small #taskmenu a.compose .inner {
  font-size: 15px !important;
  letter-spacing: .01em;
}

/* The floating compose button Elastic clones for phones. Its stock look is a
   flat circle inside a 5px lilac halo; give it the brand gradient and a
   real elevation instead. */
.floating-action-buttons a.button {
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2)) !important;
  border-radius: 18px !important;
  box-shadow: 0 3px 5px -1px rgba(60,64,67,.3), 0 6px 10px 0 rgba(60,64,67,.15) !important;
  opacity: 1 !important;
}
.floating-action-buttons a.button:active { filter: brightness(1.08); }

/* ------------------------------------------------------------------ dark -- */

html.dark-mode {
  --g-bg:      #14111d;
  --g-surface: #1d1830;
  --g-read:    #191428;
  --g-ink:     #ece9f5;
  --g-ink-2:   #a9a2bd;
  --g-line:    #2e2745;
  --g-hover:   #262038;
  --g-soft:    #33285c;
}
html.dark-mode #messagelist tbody tr.message:hover { box-shadow: 0 1px 3px rgba(0,0,0,.6); }
html.dark-mode .searchbar.menu { background: #262038 !important; }
html.dark-mode .searchbar.menu:focus-within { background: #1d1830 !important; }
html.dark-mode #taskmenu .special-buttons a.logout:hover { background: #3a1d1c !important; }