.ia-msg-cols{
  display:grid;
  grid-template-columns: 320px 1fr;
  min-height: 0;
  height: 100%;
}

/* LEFT (Discord-like sidebar) */
.ia-msg-left{
  border-right: 1px solid var(--ia-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%),
    linear-gradient(180deg, var(--ia-panel), var(--ia-bg0));
  display:flex;
  flex-direction:column;
  min-height: 0;
}

.ia-msg-left-head{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap: 8px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--ia-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  /* NOTE:
     Do NOT use sticky here.
     Some Atrium layouts (notably iPad) can cause sticky headers inside panels
     to overlap the Atrium tab bar.
     We keep this as normal flow, and use JS to enforce action visibility. */
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Header: remove the "Messages" word and keep only the two icon actions */
.ia-msg-left-head .ia-msg-title{
  display:none;
}

/* With title hidden, collapse grid to two icon columns and pin left */
.ia-msg-left-head{
  grid-template-columns: auto auto;
  justify-content: flex-start;
}

/* Reddit-like icon pills */
.ia-msg-headicon{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ia-line2);
  background: rgba(0,0,0,0.28);
  color: var(--ia-text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.ia-msg-headicon:hover{
  background: rgba(0,0,0,0.38);
  border-color: rgba(167,139,250,0.35);
}
.ia-msg-headicon:active{ transform: translateY(1px); }

/* Render + icon while keeping "New" text in DOM for safety/handlers */
.ia-msg-headicon-new{
  font-size: 0; /* hide label text, keep accessible name */
}
.ia-msg-headicon-new::before{
  color: var(--ia-text);
  content: "+";
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

/* Cog sizing */
.ia-msg-headicon-prefs{
  font-size: 18px;
  line-height: 1;
}

/* Force header actions to remain visible (mobile portrait was hiding them after CSS load) */
.ia-msg-left-head > .ia-msg-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 auto;
}

/* Grid layout ensures buttons don't get pushed out of view */
.ia-msg-left-head .ia-msg-btn{ justify-self:end; }

.ia-msg-search{
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--ia-line);
}

.ia-msg-search-input{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ia-line2);
  background: rgba(0,0,0,0.35);
  color: var(--ia-text);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.ia-msg-search-input:focus{
  border-color: rgba(167,139,250,0.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
  background: rgba(0,0,0,0.45);
}

.ia-msg-threadlist{
  flex:1;
  overflow:auto;
  padding: 8px 6px 10px;
  min-height: 0;
}

/* RIGHT (Discord-ish chat pane) */
.ia-msg-main{
  min-height: 0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(900px 480px at 70% 0%, rgba(124,58,237,0.08), transparent 60%),
    linear-gradient(180deg, var(--ia-bg2), var(--ia-bg0));
}

.ia-msg-main-head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--ia-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(6px);
}


.ia-msg-threadname{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--ia-text);
}

.ia-msg-log{
  min-height: 0;
  flex:1;
  overflow:auto;
  padding: 14px;
  padding-bottom: 92px;
  scroll-padding-bottom: 92px;
}


.ia-msg-composer{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--ia-line);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  position: sticky;
  bottom: 0;
  z-index: 30;
  backdrop-filter: blur(6px);
}


.ia-msg-text{
  width:100%;
  resize:none;
  border-radius: 14px;
  border: 1px solid var(--ia-line2);
  background: rgba(0,0,0,0.35);
  color: var(--ia-text);
  padding: 10px 12px;
  min-height: 44px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.ia-msg-text:focus{
  border-color: rgba(167,139,250,0.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
  background: rgba(0,0,0,0.45);
}

/* Mobile: single-pane routing */
.ia-msg-back{
  display:none;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--ia-line2);
  color: var(--ia-text);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

@media (max-width: 820px){
  .ia-msg-cols{ grid-template-columns: 1fr; min-height: 100%; height: 100%; }
  .ia-msg-shell[data-mobile-view="list"] .ia-msg-left{ display:flex; }
  .ia-msg-shell[data-mobile-view="list"] .ia-msg-main{ display:none; }
  .ia-msg-shell[data-mobile-view="chat"] .ia-msg-left{ display:none; }
  .ia-msg-shell[data-mobile-view="chat"] .ia-msg-main{ display:flex; }
  .ia-msg-back{ display:inline-flex; }
  .ia-msg-main-head{ display:flex; align-items:center; gap: 10px; }
}

/* Hard rule: back button never shows on desktop */
.ia-msg-back{ display:none !important; }
@media (max-width: 820px){ .ia-msg-back{ display:inline-flex !important; } }

/* Prefs sheet */
.ia-msg-btn-icon { width: 40px; padding: 0; text-align:center; }
.ia-msg-prefs { padding: 14px; }
.ia-msg-pref-row { display:flex; align-items:center; gap:10px; padding:10px 0; cursor:pointer; }
.ia-msg-pref-row input { transform: scale(1.15); }
.ia-msg-pref-help { margin-top: 10px; font-size: 12px; opacity: 0.75; }



/* Extra-tight mobile: keep ⚙ visible in portrait */
@media (max-width: 420px){
  .ia-msg-left-head{ gap: 6px; padding: 10px 10px; }
  /* Title is hidden in this build; keep icon buttons compact and tappable */
  .ia-msg-left-head .ia-msg-btn{ padding: 0; font-size: inherit; border-radius: 999px; }
  .ia-msg-left-head .ia-msg-headicon{ width: 36px; height: 36px; }
  .ia-msg-headicon-new::before{ font-size: 19px; }
  .ia-msg-headicon-prefs{ font-size: 17px; }
}

/* Force internal scrolling (header + composer sticky) by constraining panel height */
@media (max-width: 820px){
  .ia-msg-shell{
    height: calc(100dvh - 210px);
    max-height: calc(100dvh - 210px);
    min-height: 0;
  }
}

/* Fullscreen messages (mobile): improve landscape usability by escaping Atrium panel constraints.
   Toggled by JS when the Messages tab is active on small viewports. */
body.ia-msg-fullscreen{ overflow:hidden !important; }
body.ia-msg-fullscreen .ia-msg-shell{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 99999;
  border-radius: 0;
}
body.ia-msg-fullscreen .ia-msg-cols{ height: 100%; }
body.ia-msg-fullscreen .ia-msg-left,
body.ia-msg-fullscreen .ia-msg-main{ height: 100%; }

/* Keep headers fixed while scrolling content */
body.ia-msg-fullscreen .ia-msg-left-head,
body.ia-msg-fullscreen .ia-msg-main-head{
  position: sticky;
  top: 0;
  z-index: 5;
}
body.ia-msg-fullscreen .ia-msg-search{
  position: sticky;
  top: 56px;
  z-index: 4;
}

/* Ensure internal panes scroll */
body.ia-msg-fullscreen .ia-msg-threadlist{ overflow:auto; -webkit-overflow-scrolling: touch; }
body.ia-msg-fullscreen .ia-msg-log{ overflow:auto; -webkit-overflow-scrolling: touch; }

/* Fullscreen: keep composer visible above Atrium bottom nav (mobile)
   NOTE: Atrium bottom nav height ≈ 64px. We lift the composer above it and
   add enough bottom padding to the scroll area so the last message isn't hidden. */
body.ia-msg-fullscreen .ia-msg-shell[data-mobile-view="chat"] .ia-msg-composer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 100010;
  border-radius: 0;
}
body.ia-msg-fullscreen .ia-msg-shell[data-mobile-view="chat"] .ia-msg-log{
  padding-bottom: calc(92px + 64px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(92px + 64px + env(safe-area-inset-bottom, 0px));
}



/* Close controls */
.ia-msg-headicon-close,
.ia-msg-close{
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}
@media (min-width: 821px){
  /* Desktop: no fullscreen and no close button */
  .ia-msg-headicon-close, .ia-msg-close{ display:none; }
}

@media (min-width: 821px){
  .ia-msg-shell{
    height: min(740px, calc(100vh - 260px));
    max-height: calc(100vh - 260px);
  }
}



/* Mobile landscape: avoid over-subtracting vertical chrome and ensure panels stay scrollable */
@media (max-width: 820px) and (orientation: landscape){
  .ia-msg-shell{
    height: calc(100dvh - 120px);
    max-height: calc(100dvh - 120px);
  }
  .ia-msg-left-head, .ia-msg-main-head{ padding-top: 10px; padding-bottom: 10px; }
  .ia-msg-log{ padding: 10px; padding-bottom: 64px; scroll-padding-bottom: 64px; -webkit-overflow-scrolling: touch; }
  .ia-msg-threadlist{ padding: 6px 6px 8px; -webkit-overflow-scrolling: touch; }
}


/* Attachments */
.ia-msg-upload{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--ia-line2);
  background: rgba(0,0,0,0.35);
  color: var(--ia-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.ia-msg-upload:hover{
  border-color: rgba(167,139,250,0.35);
  background: rgba(0,0,0,0.42);
}
.ia-msg-upload:active{
  transform: translateY(1px);
}
/* Allow chat flex children to shrink */
.iam-chat,
.ia-chat,
.iam-thread,
.ia-thread {
  min-width: 0;
}