/* ---------- CHAT ----------
   Two panes: a channel rail and the message flow. Both read the --panel-*
   variables through .panel, so the five block styles reach them like every
   other content panel. */
.gw-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:stretch;}
/* A fixed height rather than page flow, so the composer stays put and the
   history scrolls under it. Without it the input walks off the bottom of the
   screen the moment a channel has more than a screenful in it. */
.gw-rail,.gw-main{height:calc(100vh - 190px);min-height:340px;overflow:hidden;padding:0;}
.gw-rail{overflow-y:auto;padding:8px 0;}
.gw-rail-group{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  padding:10px 12px 4px;font-weight:600;}
.gw-rail-row{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 12px;cursor:pointer;font-size:13px;color:var(--ink-soft);}
.gw-rail-row:hover{background:var(--subtle-bg);}
.gw-rail-row.active{background:var(--subtle-bg);color:var(--ink);font-weight:600;}
/* Unread is carried by WEIGHT plus the badge, never by colour alone - the rail
   already spends its colour on the nav group tints. */
.gw-rail-row.unread{color:var(--ink);font-weight:600;}
.gw-rail-name{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.gw-rail-name .ic{width:14px;height:14px;flex-shrink:0;opacity:.6;}
.gw-rail-badge{flex-shrink:0;font-family:var(--font-mono);font-size:10px;line-height:1;
  background:var(--brick);color:#fff;border-radius:9px;padding:3px 6px;}

.gw-main{display:flex;flex-direction:column;position:relative;}
.gw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0;}
.gw-head-name{font-family:var(--font-display);font-size:17px;font-weight:600;}
.gw-head-topic{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gw-flow{flex:1;overflow-y:auto;padding:12px 16px;}

.gw-msg{position:relative;padding:5px 0;}
/* A run from the same person loses its byline, so a back-and-forth reads as a
   conversation rather than a list of stamped records. */
.gw-msg.grouped{padding-top:1px;}
.gw-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:1px;}
.gw-msg-who{font-weight:600;font-size:13px;}
.gw-msg-when{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);}
.gw-msg-body{font-size:13.5px;line-height:1.5;white-space:normal;word-break:break-word;}
.gw-edited{font-size:11px;}
.gw-msg.deleted .gw-msg-body{opacity:.65;}
/* Revealed on hover rather than always drawn: a Delete button beside every line
   makes a conversation look like a table of records to be maintained. */
.gw-msg-actions{position:absolute;top:0;right:0;display:none;gap:4px;
  background:var(--paper-raised);padding:2px;border-radius:6px;}
.gw-msg:hover .gw-msg-actions{display:flex;}

.gw-composer{display:flex;gap:8px;align-items:flex-end;padding:10px 16px;
  border-top:1px solid var(--line);flex-shrink:0;}
.gw-composer textarea{flex:1;resize:none;}

@media (max-width:820px){
  /* The rail becomes a short scrolling strip above the flow. Side by side below
     this width leaves the messages too narrow to read. */
  .gw-layout{grid-template-columns:minmax(0,1fr);}
  .gw-rail{height:auto;max-height:190px;min-height:0;}
  .gw-main{height:calc(100vh - 330px);}
}

/* Slice 2: DMs and private channels in the rail. */
.gw-rail-dm-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;}
/* A bare + rather than a .btn: at rail width a button chip crowds the heading
   out, and this sits inside a label rather than beside it. */
.gw-rail-add{background:none;border:0;cursor:pointer;color:var(--text-muted);
  font-size:15px;line-height:1;padding:0 2px;font-family:inherit;}
.gw-rail-add:hover{color:var(--ink);}
.gw-rail-empty{padding:2px 12px 8px;font-size:12px;}
/* The lock beside a private channel's name. Sized down from the 17px .ic
   default because it is an annotation on the title, not a title of its own. */
.gw-lock{width:13px;height:13px;opacity:.55;vertical-align:baseline;}
.gw-person-row{grid-template-columns:minmax(0,1fr);cursor:pointer;}
.gw-person-row:hover{background:var(--subtle-bg);}

/* Slice 3: threads, reactions and the mention menu. */
/* The layout grows a third column only while a thread is open. Toggled by a
   class rather than :has(), so it behaves the same in every browser. */
.gw-layout.with-thread{grid-template-columns:200px minmax(0,1fr) minmax(0,0.9fr);}
.gw-thread{height:calc(100vh - 190px);min-height:340px;overflow:hidden;padding:0;
  display:flex;flex-direction:column;}

.gw-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.gw-reaction{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper-raised);border-radius:11px;
  padding:1px 7px;font-size:11px;font-family:var(--font-mono);color:var(--ink-soft);line-height:1.7;}
.gw-reaction:hover{border-color:var(--line-strong);}
/* Yours is outlined, not filled: a filled pill at this size loses the emoji
   against the accent, and the border reads at a glance either way. */
.gw-reaction.mine{border-color:var(--sage);color:var(--ink);}
.gw-react-palette{display:inline-flex;gap:1px;margin-right:4px;}
.gw-react-pick{border:0;background:none;cursor:pointer;font-size:13px;line-height:1;
  padding:2px 3px;border-radius:5px;}
.gw-react-pick:hover{background:var(--subtle-bg);}

/* A link, not a button chip: it sits under a message and a chip there competes
   with the message itself for attention. */
.gw-thread-link{display:inline-block;margin-top:3px;border:0;background:none;padding:0;
  cursor:pointer;font-family:inherit;font-size:12px;color:var(--sage-ink);font-weight:500;}
.gw-thread-link:hover{text-decoration:underline;}

/* Positioned off the textarea and appended to the body, because the composer
   has overflow rules that would clip an inline menu. */
.gw-mention-menu{position:fixed;z-index:900;display:none;background:var(--paper-raised);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,0.18);
  overflow:hidden;max-height:220px;overflow-y:auto;}
.gw-mention-option{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 10px;cursor:pointer;font-size:13px;}
.gw-mention-option.active,.gw-mention-option:hover{background:var(--subtle-bg);}

@media (max-width:1100px){
  /* Below this the three columns leave the thread too narrow to read, so it
     takes the main pane's place instead of sitting beside it. */
  .gw-layout.with-thread{grid-template-columns:200px minmax(0,1fr);}
  .gw-layout.with-thread .gw-main{display:none;}
}

/* Slice 5: image attachments. */
.gw-attach-strip{display:none;gap:8px;flex-wrap:wrap;padding:8px 16px 0;flex-shrink:0;}
.gw-attach{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);}
.gw-attach img{width:100%;height:100%;object-fit:cover;display:block;}
/* On a dark scrim rather than theme paper, so a fixed white is right here for
   the same reason .order-thumb-pencil takes one. */
.gw-attach-x{position:absolute;top:2px;right:2px;border:0;cursor:pointer;line-height:1;
  background:rgba(0,0,0,0.55);color:#fff;border-radius:50%;width:17px;height:17px;font-size:13px;
  display:flex;align-items:center;justify-content:center;padding:0;}
.gw-attach-btn{padding:6px 9px;flex-shrink:0;}

.gw-images{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;}
.gw-image{display:block;line-height:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
/* Capped rather than shown at native size: a phone photograph is 4000px wide
   and would push the whole conversation off the screen. The width/height
   attributes reserve the box so the flow does not reflow as each one loads. */
.gw-image img{max-width:260px;max-height:220px;width:auto;height:auto;display:block;object-fit:cover;}

/* Slice 6: record references. */
/* A button, not an anchor: it navigates within the app rather than to a URL,
   and an <a href="#"> would put a junk fragment in the address bar. Styled to
   read as a link inside a sentence, since that is what it is. */
.gw-ref{border:0;background:var(--sage-soft);color:var(--sage-ink);cursor:pointer;
  font-family:inherit;font-size:inherit;line-height:1.3;padding:1px 6px;border-radius:5px;
  font-weight:500;}
.gw-ref:hover{background:var(--sage);color:var(--paper);}

/* Naming the products Etsy named: the listing title above, your name below.
   Stacked rather than two columns, because an Etsy title runs to ninety-odd
   characters and squeezing it into half a modal makes it unreadable. */
.etsy-rename-list{max-height:52vh;overflow-y:auto;margin-bottom:12px;}
.etsy-rename-row{padding:10px 0;border-bottom:1px solid var(--line);}
.etsy-rename-row:last-child{border-bottom:none;}
/* Clipped to one line with the full text on a title, the standing treatment
   for an Etsy-length string in a row. */
.etsy-rename-row > .sub-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px;}
.etsy-rename-row input{width:100%;}

/* The @ that opens a chat about a record, in a row's action cell. Icon-only
   because those cells are width-budgeted: the glyph is the same character the
   composer takes, so the button says what to type. */
.gw-at-btn{font-family:var(--font-mono);font-weight:600;line-height:1;padding:5px 9px;}

/* Files dropped onto the conversation. The pane's own rule carries the
   position:relative this anchors to, rather than a second .gw-main block here:
   two rules for one selector are decided by source order, which is how a
   change that looks applied silently does nothing. */
.gw-main.is-dragging::after{content:'Drop to attach';position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  background:var(--sage-soft);color:var(--sage-ink);
  border:2px dashed var(--sage);border-radius:var(--radius);
  font-family:var(--font-ui);font-size:14px;font-weight:600;pointer-events:none;}

/* Slice 7: search results. */
.gw-result{cursor:pointer;padding:8px 0;border-bottom:1px solid var(--line);}
.gw-result:hover{background:var(--subtle-bg);}
.gw-result-where{font-size:11px;color:var(--sage-ink);background:var(--sage-soft);
  border-radius:4px;padding:1px 5px;}
/* Fades rather than snapping off, so the eye follows it to the line that was
   clicked instead of hunting for what just changed. */
.gw-highlight{background:var(--mustard-soft);transition:background 1.2s ease;}

/* Slice 8: non-image attachments. */
.gw-files{display:flex;flex-direction:column;gap:4px;margin-top:5px;align-items:flex-start;}
.gw-file{display:inline-flex;align-items:center;gap:7px;max-width:320px;
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;text-decoration:none;
  color:var(--ink);background:var(--paper-raised);font-size:12.5px;}
.gw-file:hover{border-color:var(--line-strong);}
.gw-file .ic{width:15px;height:15px;flex-shrink:0;opacity:.6;}
.gw-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gw-file-size{color:var(--text-muted);font-family:var(--font-mono);font-size:11px;flex-shrink:0;}
/* A document in the composer strip gets its extension rather than a thumbnail,
   because there is nothing to show and a grey box says less than "PDF". */
.gw-attach.doc{display:flex;align-items:center;justify-content:center;background:var(--subtle-bg);}
.gw-attach-doc{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:9px;font-family:var(--font-mono);color:var(--text-muted);}

/* Slice 9: typing indicator. */
/* A fixed-height slot, so an indicator appearing and disappearing never shifts
   the messages above it under the reader's eye. */
.gw-typing{height:16px;padding:0 16px;font-size:11.5px;color:var(--text-muted);
  font-style:italic;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}