@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700&display=swap");

:root {
  color-scheme: light;
  --ink: #19221b;
  --muted: #68716a;
  --soft: #f4f6f1;
  --surface: #ffffff;
  --line: #e4e8e1;
  --lime: #c9ff4f;
  --lime-soft: #efffd0;
  --lime-dark: #24330e;
  --nav: #172019;
  --danger: #ba3c31;
  --danger-soft: #fff0ed;
  --shadow: 0 20px 55px rgba(30, 43, 31, 0.12);
  font-family: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  background: var(--soft);
  color: var(--ink);
}

button,
input,
textarea { font: inherit; }

button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.55; }

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: #fbfcfa;
  color: var(--ink);
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

input { height: 46px; padding: 0 14px; }
textarea { padding: 13px 14px; resize: vertical; line-height: 1.55; }
input::placeholder,
textarea::placeholder { color: #9ba29c; }
input:focus,
textarea:focus { border-color: #86b921; background: white; box-shadow: 0 0 0 3px rgba(141, 196, 31, 0.13); }

label,
legend {
  display: block;
  margin: 19px 0 7px;
  color: #4c554e;
  font-size: 12px;
  font-weight: 700;
}

h1,
h2,
p { margin-top: 0; }

.eyebrow {
  margin-bottom: 9px;
  color: #668a20;
  font: 700 10px/1 "Manrope", sans-serif;
  letter-spacing: 0.17em;
}

.boot-screen {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: #79a421;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 185px;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.08em;
  line-height: 1;
}

.logo-mark {
  display: flex;
  height: 25px;
  align-items: end;
  gap: 3px;
}

.logo-mark i {
  display: block;
  width: 5px;
  border-radius: 5px;
  background: #8bb528;
}

.logo-mark i:nth-child(1) { height: 13px; }
.logo-mark i:nth-child(2) { height: 25px; }
.logo-mark i:nth-child(3) { height: 18px; }
.logo strong { display: block; font: 700 12px/1.2 "Manrope", sans-serif; }
.logo small { color: #7ba11f; font-size: 9px; }
.logo-large { margin-bottom: 46px; }
.logo-large .logo-mark { height: 31px; }
.logo-large .logo-mark i { width: 6px; }
.logo-large .logo-mark i:nth-child(1) { height: 17px; }
.logo-large .logo-mark i:nth-child(2) { height: 31px; }
.logo-large .logo-mark i:nth-child(3) { height: 23px; }

.login-screen {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 28px;
  overflow: auto;
  background:
    radial-gradient(circle at 15% 85%, rgba(201, 255, 79, 0.15), transparent 28rem),
    linear-gradient(120deg, #f0f5ea 0 46%, #f8faf6 46%);
}

.login-card {
  width: min(100%, 430px);
  padding: 46px 48px 40px;
  border: 1px solid rgba(218, 226, 214, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 28px 90px rgba(43, 63, 42, 0.14);
}

.login-card h1 { margin-bottom: 9px; font: 700 34px/1.1 "Manrope", sans-serif; letter-spacing: -0.04em; }
.login-copy { color: var(--muted); font-size: 14px; }
.password-field { position: relative; }
.password-field input { padding-right: 64px; }
.password-field .icon-button { position: absolute; top: 4px; right: 4px; width: 55px; height: 38px; color: var(--muted); font-size: 11px; }
.login-button { width: 100%; margin-top: 22px; }
.secure-note { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 29px 0 0; color: #899089; font-size: 11px; }
.secure-note span,
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #8ab328; box-shadow: 0 0 0 4px rgba(139, 181, 40, 0.11); }

.mailbox-app { height: 100%; background: var(--surface); }

.app-header {
  position: relative;
  z-index: 20;
  display: flex;
  height: 68px;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: white;
}

.search-shell {
  display: flex;
  width: min(520px, 48vw);
  height: 40px;
  margin: 0 auto;
  padding: 0 14px;
  align-items: center;
  gap: 11px;
  border-radius: 10px;
  background: var(--soft);
  color: #929a93;
  font-size: 13px;
}

.search-shell > span:first-child { color: #606961; font-size: 23px; line-height: 0; transform: rotate(-20deg); }
.search-shell kbd { margin-left: auto; padding: 3px 7px; border: 1px solid #dfe4dc; border-radius: 5px; background: white; color: #8b928c; font: 10px inherit; }

.header-actions { display: flex; min-width: 185px; align-items: center; justify-content: flex-end; gap: 10px; }

.icon-button,
.avatar-button,
.text-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5d665f;
  transition: background 140ms, color 140ms;
}

.icon-button:hover,
.text-button:hover { background: var(--soft); color: var(--ink); }
.avatar-button { border-radius: 50%; background: var(--nav); color: var(--lime); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.avatar-button:hover { background: #2c382e; }

.workspace {
  position: relative;
  display: grid;
  height: calc(100% - 68px);
  grid-template-columns: 224px minmax(350px, 410px) minmax(450px, 1fr);
  overflow: hidden;
}

.sidebar {
  display: flex;
  min-width: 0;
  padding: 24px 14px 18px;
  flex-direction: column;
  background: var(--nav);
  color: white;
}

.compose-button {
  display: flex;
  height: 48px;
  margin: 0 8px 25px;
  padding: 0 17px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 11px;
  background: var(--lime);
  color: #1c2815;
  font-weight: 700;
  box-shadow: 0 9px 25px rgba(0, 0, 0, 0.15);
}

.compose-button span { font-size: 20px; font-weight: 400; }
.compose-button:hover { background: #d4ff72; transform: translateY(-1px); }

.nav-item {
  position: relative;
  display: grid;
  width: 100%;
  height: 45px;
  margin: 3px 0;
  padding: 0 12px;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aeb7b0;
  text-align: left;
  font-size: 13px;
}

.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: white; }
.nav-item.active { background: rgba(201, 255, 79, 0.12); color: var(--lime); font-weight: 700; }
.nav-item.active::before { position: absolute; left: 0; width: 3px; height: 20px; border-radius: 4px; background: var(--lime); content: ""; }
.nav-icon { font-size: 14px; }
.nav-item strong { min-width: 22px; padding: 3px 6px; border-radius: 20px; background: var(--lime); color: var(--lime-dark); text-align: center; font-size: 9px; }
.sidebar-footer { display: flex; margin: auto 11px 0; align-items: center; gap: 10px; color: #8e9990; font-size: 10px; }

.mail-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
}

.panel-toolbar {
  display: flex;
  min-height: 102px;
  padding: 26px 24px 18px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.panel-toolbar h1 { margin: 0; font: 700 25px/1.1 "Manrope", sans-serif; letter-spacing: -0.035em; }
.mail-status { min-height: 0; padding: 0 22px; color: var(--muted); font-size: 12px; }
.mail-status.loading,
.mail-status.error { min-height: 41px; padding-top: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.mail-status.error { color: var(--danger); background: var(--danger-soft); }

.thread-list {
  min-height: 0;
  flex: 1 1 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-color: #b8c0b6 transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
.thread-list::-webkit-scrollbar { width: 8px; }
.thread-list::-webkit-scrollbar-track { background: transparent; }
.thread-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #b8c0b6; background-clip: padding-box; }
.thread-list::-webkit-scrollbar-thumb:hover { background: #929c90; background-clip: padding-box; }
.thread-list[aria-busy="true"] { opacity: 0.55; }

.thread-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 105px;
  padding: 18px 18px 17px 22px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
}

.thread-row:hover { background: white; }
.thread-row.selected { background: var(--lime-soft); box-shadow: inset 3px 0 #89b725; }
.thread-avatar,
.message-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #e7ecdf;
  color: #526144;
  font-size: 11px;
  font-weight: 700;
}

.thread-row:nth-child(3n + 2) .thread-avatar { background: #e7ecfa; color: #52628a; }
.thread-row:nth-child(3n + 3) .thread-avatar { background: #f4e8df; color: #7d5b45; }
.thread-content,
.thread-topline,
.thread-subject,
.thread-preview { display: block; min-width: 0; }
.thread-topline { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.thread-sender { overflow: hidden; color: #39423b; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.thread-topline time { flex: 0 0 auto; color: #939a94; font-size: 10px; }
.thread-subject { margin-top: 5px; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.thread-preview { margin-top: 5px; overflow: hidden; color: #7d857e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.thread-row.unread { background: white; }
.thread-row.unread .thread-sender,
.thread-row.unread .thread-subject { color: #141c16; font-weight: 700; }
.unread-marker { position: absolute; top: 22px; left: 9px; width: 6px; height: 6px; border-radius: 50%; background: #86b51e; }
.message-count { display: inline-grid; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; place-items: center; border-radius: 9px; background: #eef1eb; color: #727a73; font-size: 9px; vertical-align: 1px; }

.list-empty,
.conversation-empty {
  display: flex;
  height: 100%;
  padding: 35px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--muted);
  text-align: center;
}

.list-empty h2,
.conversation-empty h2 { margin: 18px 0 7px; color: var(--ink); font: 700 17px "Manrope", sans-serif; }
.list-empty p,
.conversation-empty p { font-size: 12px; line-height: 1.5; }
.empty-list-icon,
.empty-illustration { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 20px; background: var(--lime-soft); color: #739c1b; font-size: 24px; transform: rotate(-4deg); }
.empty-illustration { width: 76px; height: 76px; font-size: 30px; }

.pagination { display: flex; min-height: 50px; padding: 0 17px 0 23px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.pagination > div { display: flex; gap: 4px; }
.pagination .icon-button { width: 31px; height: 31px; border: 1px solid var(--line); background: white; }

.conversation-panel { min-width: 0; overflow: hidden; background: white; }
.conversation-panel > div:not(.conversation-empty) { display: flex; height: 100%; flex-direction: column; }
.conversation-header {
  display: flex;
  min-height: 102px;
  padding: 24px 30px 19px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.conversation-header > div { min-width: 0; flex: 1; }
.conversation-header h2 { margin: 0 0 7px; overflow: hidden; font: 700 20px/1.2 "Manrope", sans-serif; letter-spacing: -0.025em; text-overflow: ellipsis; white-space: nowrap; }
.conversation-header p { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.text-button { width: auto; height: 34px; padding: 0 11px; border: 1px solid var(--line); white-space: nowrap; font-size: 10px; }
.danger-button { border-color: #efcac5; color: var(--danger); }
.danger-button:hover { background: var(--danger-soft); color: var(--danger); }

.messages { min-height: 0; padding: 25px clamp(22px, 4vw, 54px) 12px; flex: 1; overflow-y: auto; background: #fafbf9; }
.conversation-loading { padding: 35px; color: var(--muted); font-size: 12px; text-align: center; }
.message-card { margin-bottom: 18px; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 5px 15px rgba(31, 42, 31, 0.035); }
.message-card.outbound { margin-left: clamp(0px, 4vw, 40px); border-color: #dce9c6; background: #fcfff7; }
.message-card header { display: flex; align-items: center; gap: 11px; }
.message-avatar { flex: 0 0 36px; width: 36px; height: 36px; }
.outbound .message-avatar { background: var(--nav); color: var(--lime); }
.message-identity { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.message-identity strong { font-size: 12px; }
.message-identity small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-meta { display: flex; align-items: flex-end; flex-direction: column; color: #8b928c; font-size: 9px; }
.delivery-status { margin-top: 4px; color: #6f9420; }
.delivery-status.failed { color: var(--danger); }
.message-body { padding-top: 17px; color: #303832; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }

.reply-form { padding: 16px clamp(22px, 4vw, 54px) 20px; border-top: 1px solid var(--line); background: white; }
.reply-heading { display: flex; margin-bottom: 9px; align-items: center; justify-content: space-between; color: #4e574f; font-size: 11px; font-weight: 700; }
.reply-heading small { max-width: 60%; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.reply-form textarea { min-height: 76px; max-height: 170px; }
.reply-actions { display: flex; padding-top: 10px; align-items: center; justify-content: space-between; color: #989f99; font-size: 9px; }
.reply-actions .primary-button { height: 36px; padding: 0 14px; font-size: 10px; }

.primary-button {
  display: flex;
  height: 44px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  border-radius: 9px;
  background: var(--nav);
  color: white;
  font-size: 12px;
  font-weight: 700;
  transition: transform 140ms, background 140ms;
}

.primary-button:hover { background: #2b372d; transform: translateY(-1px); }
.mobile-compose,
.mobile-only { display: none; }
.sidebar-scrim { display: none; }

.inline-alert { margin: 11px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 11px; line-height: 1.45; }
.inline-alert.error { background: var(--danger-soft); color: var(--danger); }
.inline-alert.success { background: var(--lime-soft); color: #567a11; }

.compose-dialog {
  width: min(620px, calc(100% - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  overflow: hidden auto;
  border: 0;
  border-radius: 17px;
  background: white;
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(15, 27, 17, 0.27);
}

.compose-dialog::backdrop { background: rgba(17, 27, 20, 0.55); backdrop-filter: blur(3px); }
.compose-dialog form { padding: 28px 30px 25px; }
.compose-header { display: flex; align-items: flex-start; justify-content: space-between; }
.compose-header h2 { margin: 0; font: 700 23px "Manrope", sans-serif; letter-spacing: -0.035em; }
.compose-header .icon-button { margin-top: -7px; margin-right: -8px; font-size: 24px; }
.compose-dialog textarea { min-height: 150px; }
.compose-dialog fieldset { margin: 20px 0 0; padding: 0; border: 0; }
.compose-dialog legend { margin-top: 0; }
.delivery-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.delivery-option { position: relative; display: flex; min-height: 61px; padding: 12px 14px 12px 39px; justify-content: center; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.delivery-option::before { position: absolute; left: 14px; width: 13px; height: 13px; border: 1px solid #aeb5af; border-radius: 50%; content: ""; }
.delivery-option.selected { border-color: #9bc83e; background: var(--lime-soft); }
.delivery-option.selected::before { border: 4px solid #80aa28; background: white; }
.delivery-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.delivery-option span { font-size: 11px; font-weight: 700; }
.delivery-option small,
.schedule-fields small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.schedule-fields small { display: block; }
.compose-actions { display: flex; margin-top: 22px; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 9px; }
.compose-actions .primary-button { min-width: 145px; }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 210px minmax(380px, 1fr); }
  .conversation-panel {
    position: absolute;
    z-index: 8;
    top: 0;
    right: 0;
    bottom: 0;
    left: 210px;
    display: none;
  }
  .conversation-panel.open { display: block; }
  .conversation-header .mobile-only { display: grid; }
}

@media (max-width: 700px) {
  .app-header { height: 60px; padding: 0 13px; gap: 10px; }
  .app-header .mobile-only { display: grid; }
  .app-header .logo { min-width: 0; flex: 1; }
  .app-header .logo strong { font-size: 10px; }
  .search-shell { display: none; }
  .header-actions { min-width: auto; }
  .workspace { height: calc(100% - 60px); grid-template-columns: 1fr; }
  .sidebar {
    position: absolute;
    z-index: 15;
    top: 0;
    bottom: 0;
    left: 0;
    width: 245px;
    transform: translateX(-101%);
    transition: transform 180ms ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 50px rgba(18, 29, 20, 0.25); }
  .sidebar-scrim { position: absolute; z-index: 14; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(20, 29, 22, 0.35); }
  .sidebar.open + .sidebar-scrim { display: block; }
  .mail-panel { border-right: 0; }
  .panel-toolbar { min-height: 90px; padding: 20px 17px 15px; }
  .panel-toolbar h1 { font-size: 23px; }
  .mobile-compose { display: flex; height: 36px; padding: 0 12px; font-size: 10px; }
  .thread-row { min-height: 98px; padding-right: 15px; padding-left: 19px; }
  .conversation-panel { left: 0; }
  .conversation-header { min-height: 90px; padding: 16px 14px; }
  .conversation-header h2 { font-size: 16px; }
  .messages { padding: 17px 13px 8px; }
  .message-card { padding: 17px; }
  .message-card.outbound { margin-left: 12px; }
  .reply-form { padding: 13px; }
  .text-button { padding: 0 8px; }
}

@media (max-width: 500px) {
  .login-screen { padding: 0; background: white; }
  .login-card { min-height: 100%; padding: 38px 25px; border: 0; border-radius: 0; box-shadow: none; }
  .logo-large { margin-bottom: 70px; }
  .compose-dialog { width: 100%; max-width: none; max-height: 100%; height: 100%; margin: 0; border-radius: 0; }
  .compose-dialog form { padding: 24px 18px; }
  .delivery-options { grid-template-columns: 1fr; }
  .compose-actions { align-items: stretch; flex-direction: column; }
  .compose-actions .primary-button { width: 100%; }
  .message-meta time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}