:root{
  --bg:#f5f7f9;
  --panel:#ffffff;
  --line:#dde4ea;
  --line-strong:#cad4dd;
  --text:#14212e;
  --muted:#738190;
  --muted-2:#9aa5af;
  --navy:#172c3d;
  --blue:#2f7fcc;
  --blue-soft:#edf5fc;
  --green:#15915a;
  --yellow:#a87412;
  --yellow-soft:#fff1cf;
  --red:#ad3c3c;
  --red-soft:#fce9e9;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

button{font:inherit}

.mailai-shell{min-height:100vh}

.app-header{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.brand,.header-actions,.connection-summary{
  display:flex;
  align-items:center;
}

.brand{gap:12px}

.brand-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--navy);
  color:white;
  font-weight:750;
  font-size:18px;
}

.brand-name{
  font-size:21px;
  line-height:1;
  font-weight:750;
}

.brand-subtitle{
  margin-top:5px;
  font-size:11px;
  color:var(--muted);
}

.header-actions{gap:15px}

.connection-summary{
  gap:8px;
  font-size:12px;
  color:var(--muted);
}

.header-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#aaa;
}

.connected{background:var(--green)!important}
.offline{background:var(--red)!important}
.deferred{background:#a9b1b8!important}

.sync-button{
  min-width:104px;
  padding:10px 16px;
  border:0;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.sync-button:disabled{opacity:.55;cursor:wait}

.icon-button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#566472;
  font-size:22px;
}

.workspace{
  height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:290px 485px minmax(540px,1fr);
  overflow:hidden;
}

.sidebar{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:auto;
  padding:20px 15px 16px;
  background:var(--panel);
  border-right:1px solid var(--line);
}

.sidebar-block{margin-bottom:27px}

.sidebar-label{
  margin:0 10px 9px;
  color:#82909e;
  font-size:10px;
  font-weight:750;
  letter-spacing:.12em;
}

.sidebar-item{
  width:100%;
  min-height:42px;
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#334250;
  text-align:left;
  cursor:pointer;
}

.sidebar-item:hover{background:#f3f6f8}

.sidebar-item.active{
  background:#eaf0f4;
  color:#243745;
  font-weight:700;
}

.sidebar-icon{font-size:13px}

.category-dot{
  width:8px;
  height:8px;
  border:1px solid #9caab6;
  border-radius:50%;
}

.sidebar-count{
  color:#657585;
  font-size:11px;
}

.sidebar-loading{
  padding:9px 10px;
  color:var(--muted-2);
  font-size:11px;
}

.account-list{
  display:grid;
  gap:8px;
}

.account-card{
  display:grid;
  grid-template-columns:10px 1fr auto;
  align-items:center;
  gap:9px;
  padding:11px 10px;
  border:1px solid var(--line);
  border-radius:8px;
}

.account-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#aaa;
}

.account-main{
  min-width:0;
}

.account-main strong{
  display:block;
  font-size:12px;
}

.account-main span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account-card em{
  color:#84919d;
  font-size:9px;
  font-style:normal;
}

.sidebar-spacer{flex:1}

.storage-card{
  margin:12px 10px 2px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.storage-title{
  color:#6e7c89;
  font-size:10px;
  font-weight:700;
}

.storage-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  color:#758391;
  font-size:9px;
}

.storage-track{
  height:4px;
  margin-top:9px;
  overflow:hidden;
  border-radius:4px;
  background:#e3e8ed;
}

.storage-bar{
  width:8%;
  height:100%;
  border-radius:4px;
  background:#4e98df;
}

.message-column{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#f8fafb;
  border-right:1px solid var(--line);
}

.list-header{
  min-height:98px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:17px 20px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.list-header h1{
  margin:0;
  font-size:21px;
  font-weight:750;
}

.list-subtitle{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

.list-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.sync-status{
  color:#87939e;
  font-size:10px;
}

.sort-button{
  border:0;
  background:transparent;
  color:#4d5d6c;
  font-size:10px;
  cursor:pointer;
}

.message-list{
  flex:1;
  overflow-y:auto;
  padding:8px;
}

.mail-row{
  width:100%;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:11px;
  margin-bottom:6px;
  padding:13px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.mail-row:hover{border-color:#b9c6d1}

.mail-row.selected{
  border-color:#83b9ea;
  box-shadow:0 0 0 1px #83b9ea;
  background:#fbfdff;
}

.mail-row.unread{
  border-left:3px solid #27689e;
}

.mail-avatar{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9eef2;
  color:#344653;
  font-size:11px;
  font-weight:750;
}

.mail-row-body{min-width:0}

.mail-row-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.mail-row-top strong{
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mail-row-top time{
  flex-shrink:0;
  color:#84919d;
  font-size:9px;
}

.mail-row-subject{
  margin-top:4px;
  overflow:hidden;
  color:#1e2d39;
  font-size:11px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mail-row-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:7px;
}

.tag{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:2px 6px;
  border-radius:4px;
  background:#edf1f4;
  color:#586775;
  font-size:8px;
  font-weight:750;
}

.tag.category{
  background:#e6f0f8;
  color:#2b5878;
}

.tag.action{
  background:var(--yellow-soft);
  color:var(--yellow);
}

.tag.high{
  background:var(--red-soft);
  color:var(--red);
}

.mail-row-preview{
  margin-top:7px;
  overflow:hidden;
  color:#74818e;
  font-size:10px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.reader-column{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--panel);
}

.reader-toolbar{
  min-height:56px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
}

.toolbar-group{
  display:flex;
  align-items:center;
  gap:4px;
}

.toolbar-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:6px 9px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#435360;
  font-size:10px;
}

.toolbar-button:disabled{
  opacity:.58;
  cursor:not-allowed;
}

.back-button{
  width:32px;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
  opacity:1!important;
}

.back-button:disabled{cursor:default}

.reader-scroll{
  flex:1;
  overflow-y:auto;
}

.reader-empty-state{
  height:100%;
  display:grid;
  place-content:center;
  padding:40px;
  text-align:center;
  color:#82909e;
}

.reader-empty-state h2{
  margin:12px 0 5px;
  color:#43515e;
  font-size:17px;
}

.reader-empty-state p{
  margin:0;
  font-size:11px;
}

.reader-empty-icon{
  font-size:36px;
}

.reader-document{
  width:min(100%,880px);
  margin:0 auto;
  padding:24px 28px 52px;
}

.message-header{
  padding-bottom:18px;
}

.message-header h2{
  margin:0 0 15px;
  color:#172532;
  font-size:22px;
  line-height:1.35;
  letter-spacing:-.01em;
}

.sender-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:start;
}

.sender-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e7edf1;
  color:#2e414f;
  font-size:11px;
  font-weight:750;
}

.sender-meta{min-width:0}

.sender-line{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:baseline;
}

.sender-line strong{
  color:#2874b5;
  font-size:12px;
}

.sender-line span{
  color:#758390;
  font-size:10px;
}

.recipient-line,.date-line{
  margin-top:3px;
  color:#7c8995;
  font-size:10px;
}

.classification-strip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:0 0 22px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fafcfd;
}

.classification-strip span{
  display:block;
  margin-bottom:4px;
  color:#84909b;
  font-size:8px;
}

.classification-strip strong{
  display:block;
  overflow:hidden;
  color:#283743;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.message-content-reader{
  padding-top:20px;
  border-top:1px solid var(--line);
  color:#263541;
  font-size:15px;
  line-height:1.72;
  user-select:text;
  -webkit-user-select:text;
}

.content-heading{
  margin:25px 0 10px;
  color:#162532;
  font-size:17px;
  line-height:1.4;
}

.content-heading:first-child{margin-top:0}

.content-byline{
  margin:0 0 18px;
  color:#697987;
  font-size:13px;
  font-style:italic;
}

.content-paragraph{
  margin:0 0 17px;
  overflow-wrap:break-word;
}

.reader-link{
  color:#2479bd;
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}

.reader-action-row{
  margin:5px 0 19px;
}

.reader-primary-link{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:5px;
  background:#1e7ac7;
  color:white;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.reader-muted{
  color:#8a97a2;
  font-style:italic;
}

.attachments{
  margin-top:28px;
  padding-top:17px;
  border-top:1px solid var(--line);
}

.attachments h3{
  margin:0 0 9px;
  font-size:11px;
}

.attachment-chip{
  display:inline-block;
  margin:0 5px 5px 0;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fafbfc;
  font-size:10px;
}

.state-message{
  padding:35px 20px;
  color:#788693;
  text-align:center;
  font-size:11px;
}

.error-state{color:var(--red)}

@media(max-width:1320px){
  .workspace{
    grid-template-columns:230px 430px minmax(460px,1fr);
  }

  .classification-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:1020px){
  .workspace{
    height:auto;
    grid-template-columns:210px 1fr;
    overflow:visible;
  }

  .sidebar,.message-column{
    height:calc(100vh - 72px);
  }

  .reader-column{
    grid-column:1/-1;
    min-height:650px;
    border-top:1px solid var(--line);
  }
}

@media(max-width:680px){
  .app-header{
    height:auto;
    min-height:72px;
    padding:12px 14px;
  }

  .connection-summary{
    display:none;
  }

  .workspace{
    display:block;
  }

  .sidebar{
    height:auto;
  }

  .message-column{
    height:620px;
  }

  .reader-column{
    min-height:600px;
  }

  .reader-toolbar{
    overflow-x:auto;
  }

  .toolbar-button span:last-child{
    display:none;
  }

  .reader-document{
    padding:20px 16px 40px;
  }

  .message-header h2{
    font-size:19px;
  }

  .classification-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .message-content-reader{
    font-size:15px;
    line-height:1.68;
  }
}

/* ============================================================
   FIX-MAILAI-THREE-PANE-SCROLL-V01
   Independent scroll containment for sidebar, list, reader.
   ============================================================ */

html,
body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mailai-shell {
    width: 100%;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.app-header {
    flex: 0 0 72px;
}

.workspace {
    height: calc(100vh - 72px);
    min-height: 0;
    overflow: hidden;
}

/* LEFT PANE */
.sidebar {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* MIDDLE PANE */
.message-column {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.list-header {
    flex: 0 0 auto;
}

.message-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* RIGHT PANE */
.reader-column {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.reader-toolbar {
    flex: 0 0 auto;
}

.reader-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Prevent long message content from forcing pane expansion. */
.reader-document,
.message-content-reader,
.mail-row-body,
.sender-meta {
    min-width: 0;
}

/* Desktop: keep all three panes independently scrollable. */
@media (min-width: 1021px) {
    body {
        overflow: hidden;
    }

    .workspace {
        height: calc(100vh - 72px);
        overflow: hidden;
    }

    .sidebar,
    .message-column,
    .reader-column {
        min-height: 0;
        max-height: calc(100vh - 72px);
    }
}

/* Tablet/mobile intentionally returns to document flow. */
@media (max-width: 1020px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mailai-shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .workspace {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .sidebar,
    .message-column,
    .reader-column {
        max-height: none;
    }
}

/* BUILD-MAILAI-RICH-READER-V03 */

.reader-document{
  width:min(100%,960px);
  padding:22px 28px 52px;
}

.message-header{
  padding-bottom:16px;
}

.message-header h2{
  font-size:21px;
  margin-bottom:12px;
}

.classification-strip{
  margin-bottom:14px;
}

.rich-message-frame-shell{
  width:100%;
  margin-top:2px;
  padding-top:12px;
  border-top:1px solid var(--line);
  background:#fff;
}

.rich-message-frame{
  display:block;
  width:100%;
  min-height:420px;
  height:720px;
  border:0;
  background:#fff;
}

.plain-text-fallback{
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.plain-text-fallback summary{
  color:#667786;
  font-size:10px;
  cursor:pointer;
  user-select:none;
}

.plain-text-fallback[open] summary{
  margin-bottom:14px;
}

.plain-text-fallback .message-content-reader{
  padding-top:14px;
  border-top:0;
}

@media(max-width:680px){
  .reader-document{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }

  .rich-message-frame{
    min-height:360px;
  }
}