/* Pocztylion — Gmail-inspired styles */
:root {
  --bg:      #f6f8fc;
  --surface: #ffffff;
  --primary: #1a73e8;
  --primary-d: #185abc;
  --primary-bg: #e8f0fe;
  --text:    #202124;
  --text2:   #5f6368;
  --text3:   #9aa0a6;
  --brd:     #e0e0e0;
  --brd2:    #dadce0;
  --hover:   #f1f3f4;
  --active:  #d3e3fd;
  --active-t:#1a73e8;
  --unread:  #ffffff;
  --red:     #d93025;
  --red-bg:  #fce8e6;
  --green:   #188038;
  --shadow:  0 1px 3px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);
  --shadow-l:0 4px 20px rgba(0,0,0,.14);
  --r:8px;
  --r-pill:24px;
  --topbar-h:64px;
  --sidebar-w:256px;
  font-family: 'Roboto', -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
}

[data-theme="dark"] {
  --bg:      #1c1c1e;
  --surface: #2c2c2e;
  --text:    #f2f2f7;
  --text2:   #aeaeb2;
  --text3:   #636366;
  --brd:     #3a3a3c;
  --brd2:    #48484a;
  --hover:   #3a3a3c;
  --active:  #1c3461;
  --active-t:#7db0f7;
  --unread:  #2c2c2e;
  --primary-bg: #1c3461;
  --shadow:  0 1px 3px rgba(0,0,0,.3);
  --shadow-l:0 4px 20px rgba(0,0,0,.4);
}

*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html,body { height:100%;overflow:hidden;background:var(--bg); }
button { cursor:pointer;font-family:inherit;font-size:14px; }
input,textarea { font-family:inherit; }
a { text-decoration:none;color:inherit; }

::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--brd2);border-radius:3px; }

/* ===== LOGIN ===== */
.login-wrap { display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--bg); }
.login-card { background:var(--surface);border-radius:16px;padding:40px 36px;width:100%;max-width:400px;box-shadow:var(--shadow-l);border:1px solid var(--brd); }
.login-logo { text-align:center;margin-bottom:28px; }
.login-logo h1 { font-family:'Google Sans',sans-serif;font-size:26px;font-weight:400;margin:12px 0 4px; }
.login-logo p { font-size:13px;color:var(--text2); }
.login-err { background:var(--red-bg);color:var(--red);padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:16px;border:1px solid rgba(217,48,37,.2); }
.field { display:flex;flex-direction:column;gap:5px;margin-bottom:14px; }
.field label { font-size:12px;font-weight:500;color:var(--text2); }
.field input { padding:11px 14px;border:1px solid var(--brd2);border-radius:var(--r);font-size:14px;color:var(--text);background:var(--surface);outline:none;transition:border-color .15s; }
.field input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.15); }
.pass-wrap { position:relative; }
.pass-wrap input { width:100%;padding-right:44px; }
.pass-eye { position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);padding:4px; }
.btn-login { width:100%;padding:13px;background:var(--primary);color:#fff;border:none;border-radius:var(--r-pill);font-size:15px;font-weight:500;margin-top:6px;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:10px; }
.btn-login:hover { background:var(--primary-d); }
.btn-login:disabled { opacity:.7;cursor:not-allowed; }
.btn-spin { width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== TOPBAR ===== */
.topbar { display:flex;align-items:center;gap:8px;height:var(--topbar-h);padding:0 16px;background:var(--surface);border-bottom:1px solid var(--brd);position:fixed;top:0;left:0;right:0;z-index:100; }
.topbar-logo { display:flex;align-items:center;gap:8px;min-width:220px; }
.topbar-logo span { font-family:'Google Sans',sans-serif;font-size:20px;font-weight:400;color:var(--text2); }
.topbar-right { display:flex;align-items:center;gap:6px;margin-left:auto; }

/* Search */
.search-bar { flex:1;max-width:680px;position:relative;display:flex;align-items:center;background:var(--hover);border-radius:var(--r-pill);border:1px solid transparent;transition:.2s; }
.search-bar:focus-within { background:var(--surface);border-color:var(--brd2);box-shadow:var(--shadow); }
.search-ico { background:none;border:none;color:var(--text2);padding:10px 12px;flex-shrink:0; }
.search-bar input { flex:1;border:none;background:transparent;font-size:16px;color:var(--text);outline:none;padding:10px 0; }
.search-bar input::placeholder { color:var(--text3); }
.search-clear { background:none;border:none;color:var(--text3);padding:10px 12px; }
.search-clear:hover { color:var(--text); }
.search-results { position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-l);z-index:200;border:1px solid var(--brd);overflow:hidden; }
.sr-item { display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:.1s; }
.sr-item:hover { background:var(--hover); }
.sr-av { width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0; }
.sr-info { flex:1;min-width:0; }
.sr-from { font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sr-sub { font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* User menu */
.user-wrap { position:relative; }
.user-avatar { width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-weight:500;font-size:14px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s; }
.user-avatar:hover { box-shadow:0 0 0 3px rgba(26,115,232,.2); }
.user-menu { position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-l);border:1px solid var(--brd);z-index:200; }
.user-menu-head { display:flex;align-items:center;gap:12px;padding:14px 16px; }
.um-name { font-weight:500;font-size:14px; }
.um-email { font-size:12px;color:var(--text2); }
.um-sep { border:none;border-top:1px solid var(--brd);margin:4px 0; }
.um-item { display:flex;align-items:center;gap:10px;padding:10px 16px;width:100%;background:none;border:none;color:var(--text);font-size:14px;cursor:pointer;transition:.1s; }
.um-item:hover { background:var(--hover); }
.um-item.logout { color:var(--red); }
.um-item.logout:hover { background:var(--red-bg); }

/* ===== LAYOUT ===== */
.app-layout { display:flex;height:calc(100vh - var(--topbar-h));margin-top:var(--topbar-h);overflow:hidden; }

/* Sidebar */
.sidebar { width:var(--sidebar-w);flex-shrink:0;padding:8px 0;overflow-y:auto;transition:width .2s; }
.sidebar.collapsed { width:72px; }
.sidebar.collapsed .compose-btn span { display:none; }
.sidebar.collapsed .compose-btn { width:48px;height:48px;padding:0;border-radius:50%;justify-content:center;margin:8px auto; }
.sidebar.collapsed .fnav-label { display:none; }
.sidebar.collapsed .fnav-item { width:48px;height:48px;justify-content:center;padding:0;margin:0 auto;border-radius:50%; }
.sidebar.collapsed .fnav-badge { display:none; }

.compose-btn { display:flex;align-items:center;gap:12px;margin:8px 16px 12px;padding:16px 24px;background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--shadow);border:none;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;width:calc(100% - 32px);transition:box-shadow .2s; }
.compose-btn:hover { box-shadow:var(--shadow-l); }
.compose-btn svg { color:var(--primary);flex-shrink:0; }

.folder-list { display:flex;flex-direction:column; }
.fnav-item { display:flex;align-items:center;gap:10px;height:38px;padding:0 16px;border-radius:0 20px 20px 0;width:calc(100% - 8px);background:none;border:none;font-size:14px;color:var(--text);cursor:pointer;transition:background .1s;text-align:left; }
.fnav-item:hover { background:var(--hover); }
.fnav-item.active { background:var(--active);color:var(--active-t);font-weight:500; }
.fnav-item.active svg { color:var(--active-t); }
.fnav-item svg { color:var(--text2);flex-shrink:0; }
.fnav-label { flex:1; }
.fnav-badge { margin-left:auto;font-size:12px;font-weight:500;color:var(--text2); }
.fnav-item.active .fnav-badge { color:var(--active-t); }

/* Main content */
.main { flex:1;display:flex;overflow:hidden; }

/* List panel */
.list-panel { width:360px;flex-shrink:0;border-right:1px solid var(--brd);display:flex;flex-direction:column;background:var(--surface); }
.list-toolbar { display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--brd);min-height:46px;flex-shrink:0; }
.cb-all { display:flex;align-items:center;padding:4px 6px; }
.cb-all input { width:16px;height:16px;accent-color:var(--primary);cursor:pointer; }
.bulk-actions { display:flex;gap:2px; }
.folder-title { font-size:16px;font-family:'Google Sans',sans-serif;font-weight:400;flex:1;padding:0 4px; }
.filter-chips { display:flex;gap:4px; }
.chip { padding:4px 12px;border-radius:16px;border:1px solid var(--brd2);background:var(--surface);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;transition:.1s;white-space:nowrap; }
.chip:hover { background:var(--hover); }
.chip.active { background:var(--primary-bg);color:var(--primary);border-color:transparent; }

.email-list { flex:1;overflow-y:auto; }
.loading { display:flex;align-items:center;justify-content:center;height:120px; }
.spinner { width:24px;height:24px;border:3px solid var(--brd);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite; }
.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:10px;color:var(--text2); }
.empty-state svg { color:var(--brd2);margin-bottom:6px; }
.empty-state p { font-size:15px;color:var(--text); }
.empty-state small { font-size:13px; }

/* Email rows */
.erow { display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-bottom:1px solid var(--brd);cursor:pointer;transition:background .1s;position:relative; }
.erow:hover { background:var(--hover);box-shadow:inset 2px 0 0 var(--primary); }
.erow.selected { background:var(--active); }
.erow.unread { background:var(--unread); }
.erow.unread .esender,.erow.unread .esubject { font-weight:500; }
.erow.unread .etime { font-weight:500;color:var(--text); }

.ecb { opacity:0;transition:opacity .1s;flex-shrink:0;padding-top:1px; }
.ecb input { width:16px;height:16px;accent-color:var(--primary);cursor:pointer; }
.erow:hover .ecb,.erow.checked .ecb { opacity:1; }
.erow .unread-dot { position:absolute;left:4px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--primary); }

.eav { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:14px;flex-shrink:0; }
.ebody { flex:1;min-width:0; }
.erow1 { display:flex;align-items:baseline;gap:6px;margin-bottom:2px; }
.esender { font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.etime { font-size:12px;color:var(--text2);white-space:nowrap;flex-shrink:0; }
.esubject { font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px; }
.epreview { font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.eactions { position:absolute;right:10px;top:10px;display:flex;gap:2px;opacity:0;background:var(--hover);border-radius:4px;padding:2px; }
.erow:hover .eactions { opacity:1; }
.estar { background:none;border:none;color:var(--text3);font-size:15px;padding:2px 3px;cursor:pointer;line-height:1;transition:color .1s; }
.estar:hover,.estar.on { color:#f4b400; }
.eatt-icon { font-size:11px;color:var(--text3);padding:3px 2px; }

/* Pagination */
.pagination { display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:6px 14px;border-top:1px solid var(--brd);font-size:13px;color:var(--text2);flex-shrink:0; }
.pg-btn { padding:4px 8px;border-radius:4px;border:none;background:none;color:var(--text2);cursor:pointer; }
.pg-btn:hover:not(:disabled) { background:var(--hover);color:var(--text); }
.pg-btn:disabled { opacity:.4;cursor:default; }

/* View panel */
.view-panel { flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--surface); }
.view-empty { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text2); }
.view-empty p { font-size:15px; }
.view-content { flex:1;overflow-y:auto;display:flex;flex-direction:column; }
.view-toolbar { display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--brd);flex-shrink:0; }
.view-subj-wrap { flex:1;display:flex;align-items:center;gap:8px;min-width:0; }
.view-subj { font-size:20px;font-family:'Google Sans',sans-serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.msg-wrap { padding:0 20px 24px; }
.msg-card { border:1px solid var(--brd2);border-radius:var(--r);margin-top:16px;overflow:hidden; }
.msg-head { display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer;transition:background .1s; }
.msg-head:hover { background:var(--hover); }
.msg-meta { flex:1;min-width:0; }
.msg-from { font-size:14px;font-weight:500; }
.msg-to { font-size:12px;color:var(--text2);margin-top:2px; }
.msg-date-str { font-size:12px;color:var(--text2);flex-shrink:0; }
.msg-body { padding:14px 18px;font-size:14px;line-height:1.75;color:var(--text);border-top:1px solid var(--brd2);max-height:600px;overflow-y:auto; }
.msg-body a { color:var(--primary); }
.msg-body img { max-width:100%;height:auto; }
.msg-atts { display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--brd2); }
.att-chip { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--brd2);border-radius:var(--r);font-size:12px;cursor:pointer;background:var(--surface);color:var(--text);text-decoration:none;transition:.1s; }
.att-chip:hover { background:var(--hover); }
.att-chip svg { color:var(--text2); }
.reply-bar { display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--brd);flex-shrink:0; }
.reply-btn { display:flex;align-items:center;gap:8px;padding:7px 18px;border:1px solid var(--brd2);border-radius:20px;background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;transition:.1s; }
.reply-btn:hover { background:var(--hover); }

/* Icon buttons */
.icon-btn { width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.1s;flex-shrink:0; }
.icon-btn:hover { background:var(--hover);color:var(--text); }
.icon-btn.danger:hover { background:var(--red-bg);color:var(--red); }

/* ===== COMPOSE ===== */
.compose-modal { position:fixed;bottom:0;right:20px;width:540px;background:var(--surface);border-radius:12px 12px 0 0;box-shadow:var(--shadow-l);z-index:200;border:1px solid var(--brd);border-bottom:none;display:flex;flex-direction:column;max-height:80vh; }
.compose-head { display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--text);border-radius:12px 12px 0 0;color:rgba(255,255,255,.9);font-size:14px;font-weight:500;user-select:none; }
.icon-btn-w { width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;cursor:pointer; }
.icon-btn-w:hover { background:rgba(255,255,255,.15);color:#fff; }
.compose-body { display:flex;flex-direction:column;flex:1;overflow:hidden; }
.cfield { display:flex;align-items:center;border-bottom:1px solid var(--brd);padding:6px 14px;gap:8px; }
.clabel { font-size:13px;color:var(--text2);min-width:24px;flex-shrink:0; }
.clabel-btn { background:none;border:none;font-size:12px;color:var(--text3);margin-left:auto;padding:2px 6px;border-radius:4px;cursor:pointer; }
.clabel-btn:hover { background:var(--hover);color:var(--text); }
.cfield input { flex:1;border:none;outline:none;font-size:14px;color:var(--text);background:transparent;padding:3px 0; }
.cfield input::placeholder { color:var(--text3); }
.csubject { font-weight:500; }
.csubject::placeholder { font-weight:400; }
.cbody { flex:1;overflow-y:auto;padding:10px 14px;font-size:14px;color:var(--text);outline:none;min-height:140px;line-height:1.7; }
.cbody:empty::before { content:attr(data-ph);color:var(--text3);pointer-events:none; }
.compose-footer { display:flex;align-items:center;gap:4px;padding:6px 10px;border-top:1px solid var(--brd);flex-shrink:0; }
.btn-send { display:flex;align-items:center;gap:7px;padding:9px 22px;background:var(--primary);color:#fff;border:none;border-radius:var(--r-pill);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s;margin-right:4px; }
.btn-send:hover { background:var(--primary-d); }
.btn-send:disabled { opacity:.6;cursor:not-allowed; }
.compose-trash { margin-left:auto; }

/* Toast */
.toast { position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--text);color:#fff;padding:10px 20px;border-radius:var(--r-pill);font-size:14px;z-index:500;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap; }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--red); }
.toast.ok  { background:var(--green); }

/* Utilities */
.hidden { display:none!important; }

/* Responsive */
@media(max-width:860px) {
  :root { --sidebar-w:72px; }
  .topbar-logo span { display:none; }
  .compose-modal { width:calc(100vw - 16px);right:8px; }
}
@media(max-width:640px) {
  .list-panel { display:none; }
  .list-panel.mobile-show { display:flex;width:100%; }
  .view-panel { display:none; }
  .view-panel.mobile-show { display:flex;width:100%; }
}