.se-chat-page-intro{
  width:min(980px,100%);
  margin:6px 0 30px;
}
.se-chat-page-intro h2{
  max-width:860px;
  margin:0 0 12px;
  font-size:40px;
  line-height:1.12;
  font-weight:400;
}
.se-chat-page-lead{
  max-width:900px;
  margin:0;
  color:var(--paper-soft);
  font-size:18px;
  line-height:1.75;
}
.se-chat-page-note{
  max-width:880px;
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(183,157,110,.15);
  color:#a79f90;
  font-size:13px;
  line-height:1.6;
}

.se-chat-app{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:22px;
  width:min(1180px,calc(100vw - 44px));
  max-width:none;
  margin:34px 0 0;
  transform:none;
  box-sizing:border-box;
}
.se-chat-sidebar,
.se-chat-main{
  border:1px solid rgba(183,157,110,.22);
  background:
    linear-gradient(145deg,rgba(69,59,45,.11),rgba(19,20,19,.72)),
    rgba(22,23,21,.68);
  box-shadow:0 18px 42px rgba(0,0,0,.12);
}
.se-chat-sidebar{
  padding:20px;
}
.se-chat-sidebar h2{
  margin:0 0 18px;
  font-size:33px;
  font-weight:400;
}
.se-chat-main{
  min-width:0;
  padding:22px;
}
.se-chat-members{
  display:grid;
  gap:7px;
}
.se-chat-member{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:0 11px;
  align-items:center;
  width:100%;
  padding:9px;
  border:1px solid transparent;
  background:rgba(14,15,14,.22);
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.se-chat-member:hover{
  background:rgba(183,157,110,.06);
}
.se-chat-member.is-active{
  border-color:rgba(183,157,110,.58);
  background:rgba(183,157,110,.10);
}
.se-chat-member span{
  grid-row:span 2;
  width:48px;
  height:48px;
  overflow:hidden;
}
.se-chat-member img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.se-chat-member strong{
  line-height:1.2;
}
.se-chat-member small{
  color:var(--brass);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.se-chat-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(183,157,110,.14);
}
.se-chat-heading h2{
  margin:0 0 8px;
  font-size:36px;
  font-weight:400;
}
.se-chat-heading p{
  max-width:760px;
  margin:0;
  color:var(--paper-soft);
  font-size:16px;
  line-height:1.65;
}
.se-chat-reset{
  flex:0 0 auto;
  min-width:auto;
  min-height:38px;
  padding:0 14px;
  white-space:nowrap;
}

.se-chat-messages{
  display:grid;
  gap:10px;
  min-height:330px;
  max-height:620px;
  overflow:auto;
  margin:18px 0;
  padding:14px;
  background:rgba(12,13,12,.30);
}
.se-chat-msg{
  max-width:82%;
  padding:11px 13px;
  border:1px solid rgba(183,157,110,.16);
  white-space:pre-wrap;
  line-height:1.6;
}
.se-chat-msg.is-user{
  justify-self:end;
  background:rgba(183,157,110,.10);
}
.se-chat-msg.is-assistant{
  justify-self:start;
  background:rgba(30,31,28,.72);
}
.se-chat-handoff{
  display:block;
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--brass);
  cursor:pointer;
}

.se-chat-form label{
  display:block;
  margin-bottom:6px;
  color:var(--brass);
  font:700 10px/1.35 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.se-chat-form textarea{
  display:block;
  width:100%;
  margin:0;
  padding:11px;
  border:1px solid rgba(183,157,110,.30);
  background:rgba(12,13,12,.45);
  color:var(--paper);
  font:16px/1.5 var(--serif);
  resize:vertical;
}
.se-chat-form textarea:focus{
  outline:1px solid rgba(183,157,110,.66);
}
.se-chat-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-top:10px;
}
.se-chat-form-actions p{
  margin:0;
  color:#9f9789;
  font-size:13px;
}
.se-chat-form-actions .button{
  flex:0 0 auto;
}

@media(max-width:1100px){
  .se-chat-app{
    width:min(100%,calc(100vw - 44px));
  }
}
@media(max-width:820px){
  .se-chat-app{
    grid-template-columns:1fr;
    width:100%;
    margin-left:0;
    transform:none;
  }
  .se-chat-members{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:560px){
  .se-chat-page-intro h2{
    font-size:32px;
  }
  .se-chat-members{
    grid-template-columns:1fr;
  }
  .se-chat-heading{
    display:block;
  }
  .se-chat-reset{
    margin-top:12px;
  }
  .se-chat-form-actions{
    display:block;
  }
  .se-chat-form-actions p{
    margin-bottom:10px;
  }
}


/* ============================================================
   v0.1.3 — keep chat layout inside the visible page area
   ============================================================ */
.se-chat-app{
  margin-left:0 !important;
  margin-right:0 !important;
  transform:none !important;
}


/* ============================================================
   v0.1.4 — wider assistant introduction
   ============================================================ */

/* Ordinary assistant replies may use more of the conversation width. */
.se-chat-msg.is-assistant{
  max-width:92%;
}

/* The initial welcome message works better as an intro panel than
   as a small speech bubble. */
.se-chat-messages > .se-chat-msg.is-assistant:first-child{
  width:100%;
  max-width:100%;
  padding:14px 16px;
  border-color:rgba(183,157,110,.22);
  background:
    linear-gradient(90deg,rgba(183,157,110,.08),rgba(30,31,28,.66)),
    rgba(30,31,28,.72);
}


/* ============================================================
   v0.1.5 — keep chat history inside the visible width
   ============================================================ */
.se-chat-app,
.se-chat-sidebar,
.se-chat-main,
.se-chat-messages,
.se-chat-msg,
.se-chat-form,
.se-chat-form textarea{
  box-sizing:border-box;
}
.se-chat-main{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.se-chat-messages{
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
.se-chat-msg{
  min-width:0;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
.se-chat-msg.is-user,
.se-chat-msg.is-assistant{
  max-width:min(92%,100%);
}
.se-chat-messages > .se-chat-msg.is-assistant:first-child{
  width:100%;
  max-width:100%;
}
.se-chat-handoff{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:left;
}
.se-chat-form textarea{
  max-width:100%;
}