:root{--ink:#172033;--muted:#6d7585;--line:#e6e9f0;--blue:#315efb;--blue-soft:#edf2ff;--surface:#fff;--bg:#f6f8fc;--shadow:0 22px 60px rgba(30,43,80,.13)}
*{box-sizing:border-box}body{margin:0;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}button,input,textarea{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}.shell{height:100vh;display:grid;grid-template-columns:68px 250px minmax(0,1fr);overflow:hidden;width:100vw;max-width:100vw}.app-rail{background:#202b30;color:#f1f6f7;display:flex;flex-direction:column;height:100vh;width:68px;min-width:68px;max-width:68px;overflow-y:auto;overflow-x:hidden;z-index:10;border-right:1px solid #1a2327}.rail-logo{height:56px;display:grid;place-items:center;border-bottom:1px solid #2d3b40;flex-shrink:0}.rail-logo span{width:50px;height:36px;background:url('mad-logo-whatsapp-transparent.png?v=2') center/contain no-repeat;display:block}.app-rail>button{min-height:54px;color:#9da8ad;padding:8px 2px;border-bottom:1px solid #28373b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;width:100%}.app-rail>button:hover,.app-rail>button.active{background:#172226;color:#315efb}.app-rail b{font-size:16px}.app-rail small{font-size:10px;white-space:nowrap;text-align:center;line-height:1.1;overflow:hidden;text-overflow:ellipsis;max-width:64px}.rail-spacer{flex:1}.app-rail .rail-logout{color:#ef6464;min-height:44px}.app-rail .rail-logout:hover{background:rgba(239,100,100,.15);color:#ff7878}.sidebar{background:#f8fafc;padding:16px 12px;display:flex;flex-direction:column;border-right:1px solid var(--line);width:250px;min-width:250px;max-width:250px;overflow-y:auto;overflow-x:hidden;height:100vh}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:700;text-decoration:none;color:var(--ink);padding:0 10px 28px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#2c66ff,#6a43f3);color:white;font-size:17px;box-shadow:0 8px 20px #315efb40}.primary{background:var(--blue)!important;color:#fff!important}.compose{height:46px;border-radius:13px;font-weight:600;box-shadow:0 8px 18px #315efb2d;margin:0 4px 22px}.compose span{font-size:20px;margin-right:7px}.mail-nav{display:grid;gap:3px}.nav-item{height:40px;padding:0 12px;border-radius:10px;display:flex;align-items:center;gap:12px;text-align:left;color:#525b6b;width:100%;box-sizing:border-box;cursor:pointer}.nav-item svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor}.nav-item span{flex:1;font-size:13.5px;font-weight:500;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto!important;display:block}.nav-item b{margin-left:auto;font-size:12px;font-weight:600;flex-shrink:0}.nav-item b:not(:empty){background:#eef2ff;color:#315efb;padding:1px 7px;border-radius:10px}.nav-item.active{background:#dfe7ff;color:#234bd5;font-weight:600}.nav-item.active b:not(:empty){background:#234bd5;color:#fff}.labels{border-top:1px solid #dfe3ec;margin-top:20px;padding-top:18px;display:grid;gap:3px}.section-title{font-size:11px;font-weight:700;letter-spacing:.09em;color:#9098a8;padding:0 12px 8px;display:flex;justify-content:space-between}.labels button{height:34px;text-align:left;padding:0 13px;color:#626b7b}.labels .section-title button{padding:0;height:auto;font-size:18px}.dot{width:8px;height:8px;display:inline-block;border-radius:50%;margin-right:12px}.blue{background:#4775ff}.violet{background:#9d55ef}.amber{background:#f0ab3c}.storage{margin-top:auto;padding:18px 12px 0;border-top:1px solid #dfe3ec}.storage div{display:flex;justify-content:space-between;font-size:12px}.storage progress{appearance:none;width:100%;height:5px;margin:10px 0 5px}.storage progress::-webkit-progress-bar{background:#dce1eb;border-radius:5px}.storage progress::-webkit-progress-value{background:var(--blue);border-radius:5px}.storage small{font-size:10px;color:#8c94a3}.main{background:var(--surface);min-width:0;max-width:100%;width:100%;overflow:hidden;display:flex;flex-direction:column;flex:1}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:15px}.search{height:43px;border-radius:12px;background:#f2f4f8;display:flex;align-items:center;gap:10px;padding:0 15px;flex:1;max-width:520px;color:#727b8c}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px}.icon-button{width:38px;height:38px;border-radius:10px;color:#6c7586}.icon-button:hover{background:#f1f3f7}.avatar,.sender-avatar{display:grid;place-items:center;border-radius:50%;font-weight:700}.avatar{width:37px;height:37px;background:#e7ddff;color:#7041bf;margin-left:5px}.mobile-menu{display:none}.mailbox{height:calc(100vh - 78px);display:flex;flex-direction:column;min-width:0;max-width:100%;overflow:hidden}.mailbox-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 14px}.eyebrow{font-size:10px;color:#8991a1;font-weight:700;letter-spacing:.12em;margin:0 0 4px}.folder-title-row{display:flex;align-items:center;gap:10px}.folder-title-icon{display:inline-flex;align-items:center;justify-content:center;color:#315efb;flex-shrink:0}.folder-title-icon svg{width:26px;height:26px;stroke:currentColor}.mailbox h1{font-size:24px;margin:0;letter-spacing:-.03em}.mailbox-actions button,.list-tools button{width:33px;height:33px;border-radius:9px;color:#777f8f}.tabs{display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--line);gap:24px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-shrink:0;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{padding:12px 4px 14px;color:#767e8d;position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;white-space:nowrap;flex-shrink:0;cursor:pointer;background:none;border:0}.tabs button svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor}.tabs button.active{color:#315efb;font-weight:600}.tabs button.active:after{content:"";position:absolute;height:3px;background:#315efb;border-radius:3px 3px 0 0;left:0;right:0;bottom:-1px}.tabs b{font-size:10px;background:#eef1f6;border-radius:10px;padding:2px 6px;margin-left:4px}.tabs .active b{background:#e5ebff;color:#315efb}.list-tools{height:48px;padding:0 20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);color:#88909f}#listPaginationText{margin-left:auto;font-size:12px;color:var(--muted,#6d7585)}.messages{overflow:auto;min-width:0;max-width:100%}.message{height:76px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:34px 1fr auto;gap:11px;padding:13px 22px 11px 27px;cursor:pointer;transition:.15s;background:#fff}.message:hover,.message.selected{background:#f5f7fc}.message.unread{background:#fbfcff}.message.unread .message-name,.message.unread .message-subject{font-weight:700}.message-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}.message-copy{min-width:0}.message-top{display:flex;align-items:center;gap:8px}.message-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;font-size:12px}.message-preview{font-weight:400;color:#8b92a0}.message-time{font-size:10px;color:#8b92a0}.star{font-size:16px;color:#aeb4bf;align-self:center}.reader{display:none!important}dialog{border:0;padding:0;border-radius:16px;box-shadow:var(--shadow);width:min(570px,calc(100vw - 30px));overflow:hidden}dialog::backdrop{background:#17203355;backdrop-filter:blur(3px)}.compose-window header{height:48px;background:#f2f5fb;display:flex;align-items:center;padding:0 17px}.compose-window header button{margin-left:auto;font-size:22px}.compose-window label{height:46px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 17px;color:#777f8d;gap:12px}.compose-window label input,.subject-input{border:0;outline:0;flex:1}.subject-input{width:100%;height:46px;border-bottom:1px solid var(--line);padding:0 17px}.compose-window textarea{border:0;outline:0;resize:none;width:100%;height:250px;padding:18px}.compose-window footer{display:flex;align-items:center;padding:12px 15px;border-top:1px solid var(--line)}.compose-window footer>.primary{border-radius:9px;padding:10px 16px}.compose-window footer div{display:flex;margin-left:auto}.compose-window footer div button{width:35px;height:35px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,100px);opacity:0;background:#172033;color:#fff;padding:11px 17px;border-radius:9px;box-shadow:var(--shadow);font-size:12px;transition:.25s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.shell{grid-template-columns:68px 220px 1fr}.reader{display:none}.reader.open{display:block;position:fixed;inset:0 0 0 288px;z-index:3}.reader-toolbar button:first-child{background:#f0f3f8}}@media(max-width:720px){.shell{display:block}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;z-index:6;transform:translateX(-100%);transition:.2s;box-shadow:var(--shadow)}.sidebar.open{transform:none}.main{height:100vh}.mobile-menu{display:block;font-size:19px}.topbar{height:67px;padding:0 13px}.top-actions .icon-button{display:none}.mailbox{height:calc(100vh - 67px)}.mailbox-head{padding:21px 17px 14px}.mailbox h1{font-size:21px}.tabs{padding:0 17px;gap:17px}.list-tools{padding:0 17px}.message{padding-left:17px}.reader.open{inset:0}.reader-content{padding:25px 20px 40px}.reader-toolbar{height:62px;padding:0 12px}.reader h2{font-size:21px}.search{height:40px}.search input::placeholder{color:transparent}}
.empty-list,.empty-reader{height:100%;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--muted)}.empty-list strong,.empty-reader strong{color:var(--ink);margin-top:12px}.empty-list p,.empty-reader p{font-size:12px;margin:6px 0}.empty-icon{width:54px;height:54px;border-radius:18px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:22px}.empty-reader{height:100vh;background:#fbfcff}.empty-reader p{max-width:260px}
.profile-menu,.action-menu{position:absolute;z-index:9;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:7px;min-width:190px}.top-actions{position:relative}.profile-menu{right:0;top:48px}.profile-menu>button,.action-menu>button{display:block;width:100%;padding:9px 11px;border-radius:7px;text-align:left;font-size:12px}.profile-menu>button:hover,.action-menu>button:hover{background:#f3f5f9}.profile-summary{display:flex;gap:10px;align-items:center;padding:8px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:5px}.profile-summary .avatar{margin:0;flex:none}.profile-summary strong,.profile-summary small{display:block}.profile-summary small{color:var(--muted)}.mailbox-actions{position:relative}.action-menu{right:0;top:37px}.hidden{display:none!important}.panel-dialog{width:min(880px,calc(100vw - 32px));padding:0;border:0;border-radius:18px;box-shadow:var(--shadow)}.panel-dialog::backdrop{background:#17203366;backdrop-filter:blur(3px)}.panel-window>header{display:flex;justify-content:space-between;align-items:center;padding:23px 27px;border-bottom:1px solid var(--line)}.panel-window header h2{margin:2px 0 0;font-size:22px}.panel-window>header>button{font-size:24px}.settings-layout{display:grid;grid-template-columns:190px 1fr;min-height:480px}.settings-layout>nav{padding:18px 12px;background:#f7f9fc;border-right:1px solid var(--line)}.settings-layout>nav button{width:100%;padding:10px 12px;border-radius:8px;text-align:left;margin:2px 0;color:var(--muted)}.settings-layout>nav button.active{background:#e7edff;color:var(--blue);font-weight:600}.settings-layout form{padding:27px;display:flex;flex-direction:column}.settings-layout section{display:grid;gap:17px}.settings-layout h3{margin:0 0 4px}.settings-layout section>label{display:grid;gap:7px;font-size:12px;font-weight:600}.settings-layout input,.settings-layout select,.settings-layout textarea{border:1px solid #dfe3ec;border-radius:9px;padding:10px;background:#fff}.settings-layout textarea{min-height:90px;resize:vertical}.settings-layout .check-row{display:flex;align-items:center}.settings-layout form>footer{margin-top:auto;display:flex;justify-content:flex-end;gap:8px;padding-top:22px}.settings-layout footer button,.secondary-button{padding:10px 15px;border-radius:9px;border:1px solid var(--line)}.settings-note{color:var(--muted);line-height:1.6}.small-dialog{width:min(540px,calc(100vw - 32px))}.help-content{padding:25px}.help-content>.search{max-width:none;margin-bottom:18px}.help-content>button{display:flex;width:100%;gap:14px;align-items:center;text-align:left;padding:13px;border-radius:10px}.help-content>button:hover{background:#f5f7fb}.help-content>button>span{width:35px;height:35px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;border-radius:10px}.help-content strong,.help-content small{display:block}.help-content small{color:var(--muted)}.help-content>p{min-height:30px;background:#f7f9fc;border-radius:9px;padding:12px;color:var(--muted);font-size:12px}.cc-fields{border-bottom:1px solid var(--line)}.cc-fields label{border:0}.compose-window label>button{margin-left:auto;color:var(--blue);font-size:11px}.attachment-list{display:flex;flex-wrap:wrap;gap:6px;padding:0 15px}.attachment-list span{background:#f1f4fa;border-radius:7px;padding:6px 8px;font-size:10px}.attach-button{height:35px!important;padding:0 10px!important;border:0!important;cursor:pointer}.row-check{margin-top:11px}.message:has(.row-check){grid-template-columns:18px 34px 1fr auto}.row-label{display:inline-block;margin-top:4px;color:var(--blue);background:var(--blue-soft);padding:2px 5px;border-radius:4px;font-size:9px}[data-density="compact"] .message{height:58px;padding-top:7px;padding-bottom:7px}[data-theme="dark"]{--ink:#edf1fa;--muted:#9da8ba;--line:#30384a;--surface:#171d29;--bg:#111722;--blue-soft:#263453}[data-theme="dark"] body,[data-theme="dark"] .main,[data-theme="dark"] .reader,[data-theme="dark"] .message,[data-theme="dark"] .login-card,[data-theme="dark"] .panel-dialog,[data-theme="dark"] .profile-menu,[data-theme="dark"] .action-menu{background:#171d29}[data-theme="dark"] .sidebar,[data-theme="dark"] .empty-reader,[data-theme="dark"] .settings-layout>nav{background:#111722}[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:#202838;color:var(--ink);border-color:var(--line)}@media(max-width:700px){.settings-layout{grid-template-columns:1fr}.settings-layout>nav{display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.settings-layout>nav button{white-space:nowrap}.panel-dialog{width:calc(100vw - 18px)}.profile-menu{right:-5px}}
.hidden{display:none!important}.reader article{white-space:pre-wrap}.message-actions{display:flex;gap:2px}.message-actions button{font-size:16px;color:#aeb4bf}.message-actions button.active{color:#f1ad2f}.message-actions button.snoozed{color:var(--blue)}.login-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 10%,#dfe8ff 0,transparent 35%),radial-gradient(circle at 90% 90%,#e9ddff 0,transparent 38%),#f6f8fc}.login-card{width:min(430px,100%);background:#fff;border:1px solid #edf0f5;border-radius:22px;padding:34px 38px;box-shadow:var(--shadow)}.login-brand{padding:0 0 30px}.login-card h1{font-size:27px;letter-spacing:-.035em;margin:5px 0 7px}.login-copy{color:var(--muted);margin:0 0 25px}.login-card>label{display:grid;gap:7px;margin:15px 0;font-size:12px;font-weight:600}.login-card>label input{height:46px;border:1px solid #dfe3ec;border-radius:10px;padding:0 13px;outline:0}.login-card>label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #315efb16}.login-options{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin:8px 0 20px}.login-options label{display:flex;align-items:center;gap:6px}.login-options button{color:var(--blue)}.login-button{width:100%;height:46px;border-radius:11px;font-weight:700}.login-error{min-height:18px;text-align:center;color:#c53e4b;font-size:11px}.login-card>small{display:block;text-align:center;color:#9aa1ae;font-size:10px}@media(max-width:520px){.login-card{padding:28px 22px;border-radius:18px}.login-card h1{font-size:24px}}

/* === Thread / Conversation View (Gmail style) === */
.thread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue, #315efb);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.thread-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted, #6d7585);
  font-size: 14px;
}

.thread-fullscreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 78px);
  max-height: calc(100vh - 78px);
  overflow: hidden;
  background: var(--surface, #fff);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.thread-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line, #e6e9f0);
  flex-shrink: 0;
  background: var(--surface, #fff);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.thread-back-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue, #315efb);
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.thread-back-btn:hover {
  background: var(--blue-soft, #edf2ff);
}

.thread-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.thread-topbar-actions button {
  width: auto !important;
  min-width: 36px;
  height: 36px;
  padding: 0 10px !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6d7585);
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: background 0.15s, color 0.15s;
}

.thread-topbar-actions button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.thread-topbar-actions button span {
  font-size: 12.5px;
  white-space: nowrap;
}

.thread-topbar-actions button:hover {
  background: #f3f5f9;
  color: var(--ink, #172033);
}

.thread-header {
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--line, #e6e9f0);
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.thread-header h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  color: var(--ink, #172033);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.thread-count-label {
  font-size: 12px;
  color: var(--muted, #6d7585);
}

.thread-messages-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.thread-message {
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  background: var(--surface, #fff);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.thread-message:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.thread-message.expanded {
  border-color: #c4d4f8;
}

.thread-msg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--surface, #fff);
  transition: background 0.15s;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.thread-msg-header:hover {
  background: #f8faff;
}

.collapsed .thread-msg-header {
  background: #fafbfc;
}

.thread-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2c66ff, #6a43f3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.thread-msg-info {
  flex: 1;
  min-width: 0;
}

.thread-msg-from {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.thread-msg-from strong {
  font-size: 14px;
  color: var(--ink, #172033);
}

.thread-msg-email {
  font-size: 12px;
  color: var(--muted, #6d7585);
}

.thread-msg-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted, #6d7585);
  margin-top: 2px;
}

.thread-msg-meta time {
  margin-left: auto;
  white-space: nowrap;
}

.thread-msg-toggle {
  font-size: 12px;
  color: var(--muted, #6d7585);
  flex-shrink: 0;
}

.thread-msg-body {
  padding: 12px 20px 20px 20px;
  border-top: 1px solid var(--line, #e6e9f0);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  box-sizing: border-box;
}

.thread-msg-content {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink, #172033);
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-top: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Email HTML Containment - Prevents horizontal overflow */
.thread-msg-content * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.thread-msg-content img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: inline-block;
}

.thread-msg-content table {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  table-layout: auto !important;
  border-collapse: collapse;
}

.thread-msg-content table td,
.thread-msg-content table th {
  word-break: break-word;
  overflow-wrap: break-word;
}

.thread-msg-content pre,
.thread-msg-content code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  background: #f4f6fa;
  padding: 8px 12px;
  border-radius: 6px;
}

.thread-msg-content blockquote {
  border-left: 3px solid var(--blue, #315efb);
  margin: 10px 0;
  padding: 6px 14px;
  color: var(--muted, #6d7585);
  background: #f9fafd;
  border-radius: 0 6px 6px 0;
  max-width: 100%;
  overflow-x: auto;
}

.thread-msg-content iframe,
.thread-msg-content embed,
.thread-msg-content video {
  max-width: 100% !important;
}

.thread-attachments {
  margin-top: 14px;
  padding: 10px 14px;
  background: #f4f7fb;
  border-radius: 8px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.thread-attachments strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink, #172033);
}

.attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue, #315efb);
  text-decoration: none;
  margin-right: 14px;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}

.attachment-link:hover {
  background: var(--blue-soft, #edf2ff);
  border-color: var(--blue, #315efb);
  text-decoration: none;
}

.thread-reply-bar {
  display: flex;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--line, #e6e9f0);
  flex-shrink: 0;
  background: var(--surface, #fff);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.thread-reply-bar button {
  padding: 10px 20px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--line, #e6e9f0);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.thread-reply-bar .primary {
  border-color: var(--blue, #315efb);
}

/* Dark theme overrides for threads */
[data-theme="dark"] .thread-fullscreen,
[data-theme="dark"] .thread-topbar,
[data-theme="dark"] .thread-reply-bar {
  background: #171d29;
}

[data-theme="dark"] .thread-topbar,
[data-theme="dark"] .thread-header,
[data-theme="dark"] .thread-reply-bar {
  border-color: #30384a;
}

[data-theme="dark"] .thread-header h2 {
  color: #edf1fa;
}

[data-theme="dark"] .thread-message {
  border-color: #30384a;
  background: #171d29;
}

[data-theme="dark"] .thread-message.expanded {
  border-color: #43557a;
}

[data-theme="dark"] .thread-msg-header {
  background: #171d29;
}

[data-theme="dark"] .thread-msg-header:hover {
  background: #202838;
}

[data-theme="dark"] .collapsed .thread-msg-header {
  background: #131822;
}

[data-theme="dark"] .thread-msg-body {
  border-top-color: #30384a;
}

[data-theme="dark"] .thread-msg-content {
  color: #edf1fa;
}

[data-theme="dark"] .thread-msg-from strong {
  color: #edf1fa;
}

[data-theme="dark"] .thread-msg-content pre,
[data-theme="dark"] .thread-msg-content code {
  background: #202838;
}

[data-theme="dark"] .thread-msg-content blockquote {
  background: #1d2535;
}

[data-theme="dark"] .thread-attachments {
  background: #202838;
}

[data-theme="dark"] .thread-attachments strong {
  color: #edf1fa;
}

[data-theme="dark"] .attachment-link {
  background: #171d29;
  border-color: #30384a;
  color: #8ab4f8;
}

[data-theme="dark"] .attachment-link:hover {
  background: #263453;
  border-color: #8ab4f8;
}

[data-theme="dark"] .thread-back-btn {
  color: #8ab4f8;
}

[data-theme="dark"] .thread-back-btn:hover {
  background: #263453;
}

[data-theme="dark"] .thread-topbar-actions button:hover {
  background: #263453;
  color: #edf1fa;
}

[data-theme="dark"] .thread-reply-bar button {
  background: #202838;
  color: #edf1fa;
  border-color: #30384a;
}

[data-theme="dark"] .thread-reply-bar button.primary {
  background: var(--blue, #315efb) !important;
  color: #fff !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 60px;
    width: 250px;
    z-index: 15;
    transform: translateX(-120%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .mobile-menu {
    display: block !important;
  }
  .topbar {
    padding: 0 14px;
    gap: 10px;
  }
  .thread-topbar {
    padding: 8px 14px;
  }
  .thread-header {
    padding: 14px 16px 10px;
  }
  .thread-header h2 {
    font-size: 17px;
  }
  .thread-messages-list {
    padding: 12px 14px;
  }
  .thread-msg-body {
    padding: 10px 14px 14px;
  }
  .thread-reply-bar {
    padding: 10px 14px;
  }
}

@media (max-width: 600px) {
  .shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .app-rail {
    order: 2;
    height: 54px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    border-right: 0;
    border-top: 1px solid #28373b;
  }
  .rail-logo, .rail-spacer, .app-rail [data-rail="help"], .rail-logout {
    display: none;
  }
  .app-rail>button {
    flex: 1;
    min-height: 54px;
    border-bottom: 0;
    border-right: 1px solid #28373b;
    padding: 4px 2px;
  }
  .main {
    order: 1;
    height: calc(100vh - 54px);
    max-height: calc(100vh - 54px);
  }
  .sidebar {
    inset: 0 auto 54px 0;
    width: 82vw;
    min-width: 0;
    max-width: 82vw;
  }
  .thread-fullscreen {
    height: calc(100vh - 54px - 78px);
    max-height: calc(100vh - 54px - 78px);
  }
}

/* Folder Banner (Spam / Trash notice) */
.folder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #fff8e6;
  border-bottom: 1px solid #faecc4;
  color: #8c6800;
  font-size: 13px;
  flex-shrink: 0;
}
.folder-banner button {
  font-weight: 600;
  color: #234bd5;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.folder-banner button:hover {
  background: rgba(35, 75, 213, 0.08);
}
[data-theme="dark"] .folder-banner {
  background: #2a2415;
  border-color: #4a3d1c;
  color: #e6c875;
}
[data-theme="dark"] .folder-banner button {
  color: #8ab4f8;
}

/* Batch selection action bar */
.list-selection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: #eef3ff;
  border-bottom: 1px solid #d5e2ff;
  font-size: 13px;
  color: var(--ink);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.list-selection-bar .selection-count {
  font-weight: 600;
  margin-right: 8px;
  color: var(--blue, #315efb);
}
.list-selection-bar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #234bd5;
  background: #fff;
  border: 1px solid #ccd8f5;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.list-selection-bar button:hover {
  background: #f0f4ff;
  border-color: #315efb;
}
[data-theme="dark"] .list-selection-bar {
  background: #1c263c;
  border-color: #2a3959;
  color: #edf1fa;
}
[data-theme="dark"] .list-selection-bar button {
  background: #202c45;
  border-color: #354770;
  color: #8ab4f8;
}

/* Individual message header quick actions */
.thread-msg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.thread-msg-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #6d7585);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.thread-msg-actions button:hover {
  background: #edf2ff;
  color: var(--blue, #315efb);
}

/* Print styling */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .shell { display: block !important; height: auto !important; width: 100% !important; }
  .app-rail, .sidebar, .topbar, .thread-topbar, .thread-reply-bar, .toast { display: none !important; }
  .main, .mailbox, .thread-fullscreen { height: auto !important; max-height: none !important; overflow: visible !important; }
  .thread-message { border: 1px solid #ccc !important; page-break-inside: avoid; margin-bottom: 20px !important; }
  .thread-msg-body { display: block !important; }
}




/* Folder Header and Icon */
.folder-header-info {
  display: flex;
  flex-direction: column;
}
.folder-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.folder-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue, #315efb);
  flex-shrink: 0;
}
.folder-title-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
}

/* Nav Item Layout - Prevent letter wrap & overlap */
.nav-item {
  white-space: nowrap !important;
}
.nav-item svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
}
.nav-item span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.nav-item b {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Tabs Layout - Prevent breaking/wrapping */
.tabs {
  display: flex !important;
  align-items: center !important;
  padding: 0 28px !important;
  border-bottom: 1px solid var(--line) !important;
  gap: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  scrollbar-width: none !important;
}
.tabs::-webkit-scrollbar {
  display: none !important;
}
.tabs button {
  padding: 12px 4px 14px !important;
  color: #767e8d !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  background: none !important;
  border: 0 !important;
}
.tabs button svg {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
}
.tabs button span {
  white-space: nowrap !important;
}
.tabs button.active {
  color: #315efb !important;
  font-weight: 600 !important;
}
.tabs button.active:after {
  content: '' !important;
  position: absolute !important;
  height: 3px !important;
  background: #315efb !important;
  border-radius: 3px 3px 0 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
}
.tabs b {
  font-size: 10px !important;
  background: #eef1f6 !important;
  border-radius: 10px !important;
  padding: 2px 6px !important;
  margin-left: 4px !important;
}
.tabs .active b {
  background: #e5ebff !important;
  color: #315efb !important;
}

/* Dark mode overrides for tabs & icons */
[data-theme="dark"] .folder-title-icon {
  color: #6a92ff !important;
}
[data-theme="dark"] .tabs button {
  color: #9da8ba !important;
}
[data-theme="dark"] .tabs button.active {
  color: #6a92ff !important;
}
[data-theme="dark"] .tabs button.active:after {
  background: #6a92ff !important;
}
[data-theme="dark"] .tabs .active b {
  background: #223766 !important;
  color: #8cb0ff !important;
}

/* Toolbar Buttons (.list-tools) */
.tool-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--muted, #6d7585) !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.tool-btn:hover {
  background: #f1f3f7 !important;
  color: var(--ink, #172033) !important;
  border-color: var(--line, #e6e9f0) !important;
}
.tool-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
}
.tool-btn span {
  font-size: 12.5px !important;
  font-weight: inherit !important;
  margin-left: 0 !important;
  color: inherit !important;
}
.list-tools label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 11px !important;
  color: var(--muted, #6d7585) !important;
  transition: background 0.15s !important;
}
.list-tools label:hover {
  background: #f1f3f7 !important;
  color: var(--ink, #172033) !important;
}
.list-tools label input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--blue, #315efb) !important;
}
#listPaginationText {
  margin-left: auto !important;
  font-size: 12px !important;
  color: var(--muted, #6d7585) !important;
}
[data-theme="dark"] .tool-btn {
  color: #9da8ba !important;
}
[data-theme="dark"] .tool-btn:hover {
  background: #222e3e !important;
  color: #edf1fa !important;
  border-color: var(--line, #30384a) !important;
}
[data-theme="dark"] .list-tools label {
  color: #9da8ba !important;
}
[data-theme="dark"] .list-tools label:hover {
  background: #222e3e !important;
  color: #edf1fa !important;
}
[data-theme="dark"] #listPaginationText {
  color: #9da8ba !important;
}
[data-theme="dark"] .thread-topbar-actions button {
  color: #9da8ba !important;
}
[data-theme="dark"] .thread-topbar-actions button:hover {
  background: #222e3e !important;
  color: #edf1fa !important;
}