/* ============================================================
   Home-Server Webmail — Glassmorphism Design
   ============================================================ */

:root {
  /* Paleta principal */
  --blue:       #0078d4;
  --blue-dark:  #005a9e;
  --blue-light: rgba(0,120,212,.12);
  --blue-glow:  rgba(0,120,212,.25);

  /* Fundo */
  --bg-grad: linear-gradient(135deg,
    #0d1b2e 0%, #0f2b4e 25%,
    #1565c0 60%, #0078d4 100%);

  /* Glass */
  --glass-white:  rgba(255,255,255,.70);
  --glass-strong: rgba(255,255,255,.85);
  --glass-subtle: rgba(255,255,255,.45);
  --glass-dark:   rgba(10,25,50,.65);
  --glass-border: rgba(255,255,255,.28);
  --blur:         blur(18px);
  --blur-sm:      blur(10px);

  /* Texto */
  --text:       #1a1a2e;
  --text-mid:   #3c3c5a;
  --text-muted: #6c6c8a;
  --text-inv:   rgba(255,255,255,.90);
  --text-inv-dim:rgba(255,255,255,.60);

  /* Interações */
  --hover:  rgba(255,255,255,.55);
  --sel:    rgba(0,120,212,.15);
  --sel-bd: rgba(0,120,212,.50);

  /* Danger */
  --danger: #d13438;
  --danger-bg: rgba(209,52,56,.08);
  --success:#107c10;
  --warn:   #ca5010;

  /* Dimensões */
  --rail-w:    54px;
  --sidebar-w: 228px;
  --list-w:    340px;
  --hdr-h:     50px;

  /* Misc */
  --radius:   6px;
  --radius-lg:12px;
  --shadow:   0 8px 32px rgba(0,0,0,.22);
  --shadow-sm:0 2px 10px rgba(0,0,0,.15);
  --t:        .15s ease;
  --font:     "Segoe UI",system-ui,-apple-system,sans-serif;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);
  font-size:14px;
  color:var(--text);
  background:var(--bg-grad);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;border:none;background:none;font-family:var(--font);font-size:14px}
input,textarea,select{font-family:var(--font);font-size:14px;color:var(--text)}

/* Scrollbars finas */
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.30)}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
#app{
  display:grid;
  grid-template-columns:var(--rail-w) var(--sidebar-w) var(--list-w) 1fr;
  height:100vh;
  overflow:hidden;
  gap:0;
}

/* Divisores verticais com glass */
#sidebar,#msg-list-panel,#reading-pane{
  border-right:1px solid var(--glass-border);
}

/* ============================================================
   RAIL
   ============================================================ */
#rail{
  grid-column:1;
  background:var(--glass-dark);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:10px 0 14px;
  z-index:20;
}
.rail-top,.rail-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.rail-logo{
  width:34px;height:34px;
  object-fit:contain;
  display:block;
  margin:0 auto 12px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.rail-btn{
  width:46px;height:46px;
  border-radius:var(--radius);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;
  color:var(--text-inv-dim);
  transition:background var(--t),color var(--t);
  position:relative;
}
.rail-btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.rail-btn span{font-size:9px;line-height:1;letter-spacing:.3px}
.rail-btn:hover         {background:rgba(255,255,255,.12);color:var(--text-inv)}
.rail-btn.active        {background:var(--blue);color:#fff;box-shadow:0 2px 12px rgba(0,120,212,.5)}
.rail-btn-danger:hover  {background:rgba(209,52,56,.25);color:#ff8a8a}

/* Avatar do usuário */
.rail-user{
  width:34px;height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#0078d4,#005a9e);
  color:#fff;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  cursor:default;
  user-select:none;
}

/* ============================================================
   SIDEBAR (pastas)
   ============================================================ */
#sidebar{
  grid-column:2;
  background:var(--glass-white);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.sidebar-header{justify-content:space-between}

/* ============================================================
   LISTA DE MENSAGENS
   ============================================================ */
#msg-list-panel{
  grid-column:3;
  background:var(--glass-strong);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ============================================================
   PAINEL DE LEITURA
   ============================================================ */
#reading-pane{
  grid-column:4;
  background:rgba(255,255,255,.92);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  display:flex;flex-direction:column;
  overflow:hidden;
  border-right:none;
}

/* ============================================================
   PANEL HEADER
   ============================================================ */
.panel-header{
  height:var(--hdr-h);
  min-height:var(--hdr-h);
  background:transparent;
  border-bottom:1px solid rgba(0,0,0,.09);
  display:flex;align-items:center;
  padding:0 10px 0 12px;gap:8px;
  flex-shrink:0;
}
.panel-title{
  font-weight:600;font-size:13.5px;
  color:var(--text);
  flex-shrink:0;
  overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  max-width:130px;
}
/* Para a sidebar: title ocupa espaço restante */
.sidebar-header .panel-title{flex:1;max-width:none}
.header-actions{
  flex:1;min-width:0;
  display:flex;align-items:center;
  gap:4px;
}
.panel-body{flex:1;overflow-y:auto}
.panel-footer{
  border-top:1px solid rgba(0,0,0,.08);
  padding:8px 12px;
  display:flex;align-items:center;
  justify-content:center;gap:6px;
  font-size:13px;
  background:rgba(255,255,255,.5);
  flex-shrink:0;
}

/* ============================================================
   PASTAS (folder tree)
   ============================================================ */
.folder-section{padding:4px 0}

.folder-item{
  display:flex;align-items:center;
  gap:6px;
  padding:7px 10px 7px 8px;
  cursor:pointer;
  border-radius:6px;
  margin:1px 6px;
  color:var(--text-mid);
  transition:background var(--t),color var(--t);
  user-select:none;
  font-size:13px;
  position:relative;
}
.folder-item:hover{background:rgba(0,0,0,.055);color:var(--text)}
.folder-item.active{
  background:rgba(0,120,212,.11);
  color:var(--blue-dark);font-weight:600;
}
.folder-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;background:var(--blue);border-radius:0 3px 3px 0;
}

.folder-icon{flex-shrink:0;width:17px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.75}
.folder-item.active .folder-icon{opacity:1}
.folder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.folder-badge{
  background:var(--blue);color:#fff;
  border-radius:10px;font-size:10.5px;font-weight:700;
  min-width:19px;height:18px;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;flex-shrink:0;
}

.folder-toggle{
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;
  color:var(--text-muted);
  transition:transform var(--t);
  flex-shrink:0;
}
.folder-toggle.open{transform:rotate(90deg)}

.folder-children{
  padding-left:16px;
  overflow:hidden;
  max-height:0;
  transition:max-height .22s ease;
}
.folder-children.open{max-height:2000px}
.folder-children .folder-children{padding-left:14px}

/* ============================================================
   LISTA DE EMAILS
   ============================================================ */
.msg-item{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:3px 8px;
  padding:11px 14px 10px 20px;
  border-bottom:1px solid rgba(0,0,0,.055);
  cursor:pointer;
  transition:background var(--t);
  user-select:none;
  position:relative;
}
.msg-item:hover{background:rgba(0,0,0,.035)}
.msg-item.selected{background:rgba(0,120,212,.09)}
.msg-item.selected::after{
  content:'';position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--blue);
  border-radius:0 2px 2px 0;
}

.msg-from   {grid-column:1;grid-row:1;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.msg-date   {grid-column:2;grid-row:1;font-size:11px;color:var(--text-muted);white-space:nowrap;align-self:center;padding-top:1px}
.msg-subject{grid-column:1/3;grid-row:2;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}

/* Não lido */
.msg-item.unread .msg-from   {font-weight:700}
.msg-item.unread .msg-subject{color:var(--text-mid);font-weight:500}
.msg-item.unread .msg-date   {color:var(--blue);font-weight:600;font-size:11px}
.msg-item.unread::before{
  content:'';
  position:absolute;left:7px;top:50%;
  transform:translateY(-50%);
  width:5px;height:5px;
  background:var(--blue);
  border-radius:50%;
}

/* ============================================================
   PAINEL DE LEITURA
   ============================================================ */
.reading-actions{display:flex;gap:4px;padding-left:4px}
#reading-content{flex:1;overflow-y:auto}

.msg-header{
  padding:22px 28px 16px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:rgba(255,255,255,.6);
}
.msg-header h2{
  font-size:19px;font-weight:700;
  color:var(--text);margin-bottom:14px;line-height:1.3;
}
.msg-meta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 12px;font-size:13px;
}
.msg-meta-label{color:var(--text-muted);font-weight:500;text-align:right;white-space:nowrap}
.msg-meta-value{color:var(--text-mid);word-break:break-word}

.msg-body{padding:22px 28px}
.msg-body iframe{width:100%;border:none;display:block}
.msg-body.plain-text{
  font-family:var(--font);font-size:14px;
  line-height:1.65;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
}

/* Anexos */
.attachments{
  padding:12px 28px 20px;
  border-top:1px solid rgba(0,0,0,.07);
  display:flex;flex-wrap:wrap;gap:8px;
}
.attachment-chip{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:rgba(0,120,212,.06);
  border:1px solid rgba(0,120,212,.18);
  border-radius:20px;
  font-size:13px;color:var(--blue-dark);
  text-decoration:none;
  transition:background var(--t),border-color var(--t);
}
.attachment-chip:hover{background:rgba(0,120,212,.12);text-decoration:none}
.att-icon{font-size:15px}
.att-size{color:var(--text-muted);font-size:11px}

/* Empty logo */
.empty-logo{width:80px;opacity:.2;margin-bottom:14px;filter:saturate(0)}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn-primary{
  background:var(--blue);color:#fff;
  padding:8px 20px;border-radius:var(--radius);
  font-weight:600;font-size:14px;
  transition:background var(--t),box-shadow var(--t);
  display:inline-flex;align-items:center;gap:5px;
}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 2px 10px rgba(0,120,212,.4)}
.btn-primary.full{width:100%;justify-content:center;padding:11px;font-size:15px}

.btn-secondary{
  background:rgba(255,255,255,.8);color:var(--text);
  border:1px solid rgba(0,0,0,.15);
  padding:8px 20px;border-radius:var(--radius);font-size:14px;
  transition:background var(--t);
}
.btn-secondary:hover{background:#fff}

.icon-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--radius);
  color:var(--text-mid);font-size:13px;font-weight:500;
  transition:background var(--t),color var(--t);
}
.icon-btn:hover    {background:rgba(0,0,0,.07);color:var(--text)}
.icon-btn.danger   {color:var(--danger)}
.icon-btn.danger:hover{background:var(--danger-bg)}
.icon-btn.sm{padding:3px 7px;font-size:14px}

/* ============================================================
   PESQUISA + TOOLBAR
   ============================================================ */
#search-input{
  flex:1;min-width:60px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:6px;
  padding:5px 11px;
  font-size:13px;outline:none;
  background:rgba(255,255,255,.65);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
#search-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue-glow);
  background:#fff;
}
#search-input::-webkit-search-cancel-button{cursor:pointer}

/* Ícone-botão genérico do header */
.hdr-icon-btn{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:17px;
  transition:background var(--t),color var(--t);
}
.hdr-icon-btn:hover   {background:rgba(0,0,0,.07);color:var(--text)}
.hdr-icon-btn.active  {background:rgba(0,120,212,.12);color:var(--blue)}
#btn-refresh.spinning {animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Menu de ordenação */
.sort-wrap{position:relative;flex-shrink:0}

#sort-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.13);
  border-radius:10px;
  box-shadow:0 10px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1);
  min-width:230px;z-index:400;
  overflow:hidden;
  animation:menuIn .14s ease;
}
@keyframes menuIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
.sort-menu-label{
  font-size:10.5px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.7px;
  padding:10px 14px 5px;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.sort-option{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 14px;
  font-size:13.5px;color:var(--text);
  text-align:left;cursor:pointer;
  background:none;border:none;font-family:var(--font);
  transition:background var(--t);
}
.sort-option:hover  {background:rgba(0,120,212,.06)}
.sort-option.active {color:var(--blue);font-weight:600}
.sort-check{fill:currentColor;opacity:0;flex-shrink:0;transition:opacity var(--t)}
.sort-option.active .sort-check{opacity:1}

/* Paginação */
.page-btn{
  padding:4px 12px;border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.14);
  font-size:13px;color:var(--text-mid);
  background:rgba(255,255,255,.7);
  transition:background var(--t);
}
.page-btn:hover   {background:#fff}
.page-btn.active  {background:var(--blue);color:#fff;border-color:var(--blue)}
.page-btn:disabled{opacity:.4;cursor:default}
.page-info{color:var(--text-muted);font-size:12px}

/* ============================================================
   LOADING / EMPTY
   ============================================================ */
.loading-indicator{
  padding:32px 20px;text-align:center;
  color:var(--text-muted);font-size:13px;
}
.loading-indicator::before{
  content:'';display:block;
  width:26px;height:26px;
  border:2px solid rgba(0,0,0,.08);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:0 auto 12px;
}
.empty-state{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  height:100%;
  color:var(--text-muted);font-size:14px;
  gap:6px;padding:40px;text-align:center;
}
.empty-state.large{font-size:15px;color:rgba(0,0,0,.25)}

/* ============================================================
   MODAL (backdrop genérico)
   ============================================================ */
.modal{
  position:fixed;inset:0;
  background:rgba(6,16,36,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ============================================================
   CAIXA DE COMPOSIÇÃO (glass moderno)
   ============================================================ */
.compose-box{
  position:relative;
  width:min(760px,98vw);
  height:min(640px,90vh);
  min-width:440px;min-height:340px;
  max-width:98vw;max-height:98vh;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  box-shadow:0 28px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.2) inset;
  overflow:hidden;
  animation:slideUp .2s ease;
}

/* Cabeçalho gradiente */
.compose-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;
  background:linear-gradient(135deg,rgba(0,100,200,.9) 0%,rgba(0,70,160,.95) 100%);
  color:#fff;font-size:14.5px;font-weight:600;
  letter-spacing:.2px;flex-shrink:0;
}
.compose-close{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75);
  transition:background var(--t),color var(--t);
}
.compose-close:hover{background:rgba(255,255,255,.2);color:#fff}

/* Campos Para / Cc / Assunto */
.compose-fields{flex-shrink:0;border-bottom:1px solid rgba(0,0,0,.09)}
.cfield-row{
  display:flex;align-items:center;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:0 16px;
  transition:background var(--t);
}
.cfield-row:last-child{border-bottom:none}
.cfield-row:focus-within{background:rgba(0,120,212,.04)}
.cfield-lbl{
  font-size:11px;font-weight:700;
  color:var(--text-muted);
  width:56px;flex-shrink:0;
  text-transform:uppercase;letter-spacing:.5px;
}
.cfield-input{
  flex:1;border:none;outline:none;
  padding:10px 8px;
  font-size:14px;color:var(--text);
  background:transparent;
}

/* Barra de formatação */
.ctoolbar{
  display:flex;align-items:center;
  gap:1px;padding:5px 10px;
  background:rgba(245,247,250,.95);
  border-bottom:1px solid rgba(0,0,0,.08);
  flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;
}
.ctoolbar::-webkit-scrollbar{display:none}

.ctoolbar select{
  height:26px;padding:0 6px;
  border:1px solid rgba(0,0,0,.14);border-radius:5px;
  font-size:12px;color:var(--text);
  background:rgba(255,255,255,.85);outline:none;cursor:pointer;flex-shrink:0;
}
#tb-font{width:95px}
#tb-size{width:60px}

.tb-sep{width:1px;height:20px;background:rgba(0,0,0,.13);margin:0 4px;flex-shrink:0}

.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:5px;
  font-size:13px;color:var(--text-mid);
  background:none;border:none;font-family:var(--font);
  cursor:pointer;flex-shrink:0;
  transition:background var(--t),color var(--t);
}
.tb-btn:hover{background:rgba(0,0,0,.09);color:var(--text)}
.tb-btn.on{background:var(--blue-light);color:var(--blue)}
.tb-btn b{font-size:14px;font-weight:800}
.tb-btn i{font-style:italic;font-size:14px}
.tb-btn u{font-size:13px}
.tb-btn s{font-size:13px}

/* Botões de cor */
.tb-clr{
  position:relative;
  width:28px;height:28px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background var(--t);
}
.tb-clr:hover{background:rgba(0,0,0,.09)}
.tb-clr input[type=color]{
  position:absolute;opacity:0;
  width:100%;height:100%;top:0;left:0;
  cursor:pointer;border:none;padding:0;
}

/* Emoji picker — fixo no viewport, posicionado via JS */
#emoji-picker{
  position:fixed;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.1);
  width:310px;z-index:1500;
  overflow:hidden;
  animation:menuIn .14s ease;
}

/* Handles de redimensionamento */
.cr-handle{position:absolute;z-index:10}
.cr-e{right:0;top:48px;width:5px;height:calc(100% - 96px);cursor:ew-resize}
.cr-s{bottom:0;left:20px;height:5px;width:calc(100% - 40px);cursor:ns-resize}
.cr-se{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.ep-tabs{display:flex;border-bottom:1px solid rgba(0,0,0,.08);overflow-x:auto;scrollbar-width:none}
.ep-tabs::-webkit-scrollbar{display:none}
.ep-tab{
  flex-shrink:0;padding:7px 9px;
  font-size:18px;border:none;background:none;cursor:pointer;
  transition:background var(--t);border-bottom:2px solid transparent;
}
.ep-tab:hover{background:rgba(0,0,0,.05)}
.ep-tab.on{border-bottom-color:var(--blue)}
.ep-grid{
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:1px;padding:8px;
  max-height:210px;overflow-y:auto;
}
.ep-btn{
  font-size:20px;height:34px;
  border:none;background:none;border-radius:6px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--t),transform .1s;
}
.ep-btn:hover{background:rgba(0,120,212,.1);transform:scale(1.25)}

/* Editor rico */
.compose-editor{
  flex:1;overflow-y:auto;
  padding:16px 20px;
  font-family:var(--font);font-size:14px;
  color:var(--text);line-height:1.65;
  outline:none;min-height:160px;
  word-break:break-word;
}
.compose-editor:empty::before{
  content:attr(data-ph);color:var(--text-muted);pointer-events:none;
}

/* Rodapé */
.compose-ftr{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;flex-shrink:0;
  border-top:1px solid rgba(0,0,0,.09);
  background:rgba(245,247,250,.9);
  flex-wrap:wrap;
}
.attach-lbl{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:6px;
  border:1px solid rgba(0,0,0,.14);
  font-size:13px;color:var(--text-mid);
  cursor:pointer;flex-shrink:0;
  transition:background var(--t),color var(--t);
}
.attach-lbl:hover{background:rgba(0,0,0,.05);color:var(--text)}
#file-list{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.file-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;
  background:rgba(0,120,212,.08);
  border:1px solid rgba(0,120,212,.2);
  border-radius:12px;font-size:12px;color:var(--blue-dark);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.compose-ftr-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}

/* ============================================================
   TOAST
   ============================================================ */
#toast-container{
  position:fixed;bottom:24px;right:24px;
  display:flex;flex-direction:column;gap:8px;
  z-index:2000;
}
.toast{
  background:rgba(20,20,40,.88);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  color:#fff;
  padding:12px 18px;border-radius:var(--radius);
  font-size:14px;box-shadow:var(--shadow);
  animation:slideIn .2s ease;max-width:340px;
  border-left:3px solid rgba(255,255,255,.2);
}
.toast.success{border-left-color:var(--success)}
.toast.error  {border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warn)}
@keyframes slideIn{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Alerta login */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:14px}
.alert-error{
  background:rgba(209,52,56,.08);color:var(--danger);
  border:1px solid rgba(209,52,56,.2);
}

/* ============================================================
   LOGIN (glass card)
   ============================================================ */
.login-body{
  background:var(--bg-grad);
  background-attachment:fixed;
  display:flex;align-items:center;justify-content:center;
  /* fixa à tela e impede rolagem/bounce (usa dvh para evitar a barra de endereço) */
  position:fixed;inset:0;
  height:100vh;height:100dvh;
  overflow:hidden;
  padding:16px;
}
.login-wrap{width:min(420px,96vw)}
.login-footer{margin-top:18px;text-align:center;font-size:12px;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.login-card{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.1) inset;
  padding:36px 32px;
  display:flex;flex-direction:column;gap:22px;
  animation:slideUp .3s ease;
}
.login-header{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
/* Marca única (logo HOME-SERVER + "Mail") — ESPELHA o <MailBrand> do app
   (frontend/src/shared/branding/mailBrand.css); manter cores/fonte em sincronia. */
.mail-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:visible}
.mail-brand--login{gap:10px}
.mail-brand__logo{
  display:block;width:auto;height:auto;max-width:240px;max-height:96px;
  object-fit:contain;object-position:center;margin:0 auto;
  background:transparent;border:none;box-shadow:none;filter:none;
}
.mail-brand__title{
  margin:0;font-size:34px;
  font-family:"Manrope","Inter","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  font-weight:850;line-height:1;letter-spacing:-.025em;
  background:linear-gradient(180deg,#19c8ff 0%,#0078d4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 8px 24px rgba(0,120,212,.22);
}
.login-card form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-size:13px;font-weight:600;
  color:var(--text-mid);letter-spacing:.3px;
}
.field input{
  width:100%;box-sizing:border-box;
  padding:14px 16px;
  font-size:15.5px;color:var(--text);
  background:rgba(255,255,255,.7);
  border:1.5px solid rgba(0,0,0,.13);
  border-radius:10px;
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.field input::placeholder{color:var(--text-muted);font-size:14.5px}
.field input:focus{
  border-color:var(--blue);
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 3.5px rgba(0,120,212,.13);
}
.btn-primary.full{padding:14px;font-size:15.5px;border-radius:10px}

/* Telas baixas/pequenas: compacta o card de login para caber sem rolar */
@media (max-height:680px), (max-width:420px){
  .login-card{padding:24px 22px;gap:16px}
  .mail-brand__logo{max-width:170px}
  .mail-brand__title{font-size:27px}
  .login-card form{gap:14px}
  .field input{padding:11px 14px}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* ============================================================
   MOBILE  (≤ 768 px) — painéis deslizantes em tela cheia
   ============================================================ */
.mob-back{display:none;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  border-radius:8px;color:var(--blue);
  transition:background var(--t)}
.mob-back:hover{background:rgba(0,120,212,.1)}
.mob-fab{display:none}

@media(max-width:768px){
  #app{display:block;height:100vh;overflow:hidden;position:relative}
  #rail{display:none}

  #sidebar,#msg-list-panel,#reading-pane{
    position:fixed;inset:0;z-index:10;
    width:100vw;border-right:none;
    transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .26s;
  }

  /* estado padrão: sidebar à frente, outros à direita */
  #sidebar{transform:translateX(0);opacity:1}
  #msg-list-panel{transform:translateX(100%);opacity:1}
  #reading-pane{transform:translateX(100%);opacity:1}

  /* sidebar recuada quando outro painel está ativo */
  #sidebar.mob-pushed{transform:translateX(-20%);opacity:.5;pointer-events:none}

  /* painel de mensagens ativo */
  #msg-list-panel.mob-active{transform:translateX(0)}

  /* painel de leitura ativo (cobre msg-list) */
  #reading-pane.mob-active{transform:translateX(0)}

  /* botões de voltar visíveis só em mobile */
  .mob-back{display:flex}

  /* FAB compor */
  .mob-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;bottom:22px;right:18px;z-index:200;
    width:56px;height:56px;border-radius:50%;
    background:var(--blue);color:#fff;
    box-shadow:0 4px 18px rgba(0,120,212,.45);
    transition:background var(--t),transform .15s;
  }
  .mob-fab:active{transform:scale(.93);background:var(--blue-dark)}

  /* leitura: esconde header vazio quando não há msg selecionada */
  #reading-pane #reading-content .empty-state{padding-top:30vh}

  /* composição em mobile: full-screen */
  .compose-box{
    width:100vw!important;height:100vh!important;
    border-radius:0!important;
    min-width:unset!important;min-height:unset!important;
  }
  .modal{align-items:flex-start}
}

@media(max-width:960px) and (min-width:769px){
  #app{grid-template-columns:var(--rail-w) var(--sidebar-w) 1fr}
  #msg-list-panel{display:none}
  #reading-pane{grid-column:3}
}

/* ============================================================
   INTRO "CORREIO" — animação de carta abrindo antes do login
   ============================================================ */
#mail-intro{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg-grad);background-attachment:fixed;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:introOut .7s ease 2.05s forwards;
}
#mail-intro.done{display:none}
.intro-stage{
  perspective:1000px;
  display:flex;flex-direction:column;align-items:center;
  animation:introPop .55s cubic-bezier(.2,.8,.2,1) both;
}
.envelope{
  position:relative;width:304px;height:204px;
  transform-style:preserve-3d;
  filter:drop-shadow(0 22px 48px rgba(0,0,0,.40));
}
/* corpo/base do envelope */
.env-base{
  position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(135deg,#ffffff,#e9eff7);
  z-index:1;
}
/* a carta que sobe de dentro do envelope */
.env-letter{
  position:absolute;left:14px;right:14px;top:14px;bottom:12px;z-index:2;
  background:#fff;border-radius:9px;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  animation:letterRise 1.05s cubic-bezier(.2,.8,.2,1) 1s both;
}
.env-letter img{width:140px;height:auto;display:block}
/* "Mail" na carta: mesma marca, em escala menor e sem o brilho grande */
.env-letter__title{font-size:22px;text-shadow:0 4px 12px rgba(0,120,212,.20)}
.env-letter .line{height:6px;border-radius:3px;background:#e2e8f1}
.env-letter .line.l1{width:64%}
.env-letter .line.l2{width:44%}
/* bolso da frente — cobre a carta enquanto ela está "dentro" */
.env-front{
  position:absolute;inset:0;border-radius:13px;z-index:3;
  background:linear-gradient(160deg,#f4f8fd,#dde6f1);
  clip-path:polygon(0 36%,50% 100%,100% 36%,100% 100%,0 100%);
}
.env-front::after{ /* vinco sutil dos triângulos laterais */
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,120,212,.10),transparent 60%);
  clip-path:inherit;
}
/* aba superior — abre girando para trás */
.env-flap{
  position:absolute;top:0;left:0;right:0;height:52%;z-index:5;
  transform-origin:top;backface-visibility:hidden;
  background:linear-gradient(160deg,#eaf1f9,#d3deed);
  clip-path:polygon(0 0,100% 0,50% 100%);
  animation:flapOpen .72s ease .5s both;
}
.intro-text{
  margin-top:28px;text-align:center;
  color:rgba(255,255,255,.94);
  font:600 15px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;
  letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.3);
  animation:introTextIn .5s ease .35s both;
}
@keyframes introPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes introTextIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes flapOpen{from{transform:rotateX(0)}to{transform:rotateX(-180deg)}}
@keyframes letterRise{
  0%{transform:translateY(0) scale(.98)}
  55%{transform:translateY(-106px) scale(1)}
  100%{transform:translateY(-106px) scale(1)}
}
@keyframes introOut{to{opacity:0;transform:scale(1.07);visibility:hidden}}

/* Enquanto a intro está na tela, o formulário fica ESCONDIDO (visibility:hidden):
   senão o Safari abre a sugestão de usuário/senha ancorada nos campos por baixo
   da carta. Revela só quando a animação termina — feito em CSS (independe de JS),
   via seletor de irmão (#mail-intro precede .login-wrap no DOM). */
#mail-intro ~ .login-wrap{ animation:loginReveal .4s ease 2.7s both; }
@keyframes loginReveal{
  from{ visibility:hidden; opacity:0; }
  to{   visibility:visible; opacity:1; }
}

/* Acessibilidade: sem animação para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce){
  #mail-intro{display:none!important}
  /* sem intro animada → o formulário aparece imediatamente */
  #mail-intro ~ .login-wrap{ animation:none; }
}