.ticket-workspace.collaboration-workspace {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.ticket-workspace.collaboration-workspace.context-open {
  grid-template-columns: minmax(0, 1fr) 310px;
}

.ticket-context[hidden] { display: none; }
.ticket-workspace.context-open .ticket-context {
  display: block;
  grid-column: 2;
  grid-row: 1;
}

.ticket-context {
  border-left: 1px solid var(--line);
  border-right: 0;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 20px;
  position: sticky;
  top: 70px;
}

.ticket-context-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ticket-context-header > div { display: grid; gap: 2px; }
.ticket-context-header span { color: var(--muted); font-size: 10px; }
.ticket-context-header strong { color: var(--green-dark); font-size: 16px; }
.ticket-context-header button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
}

.ticket-context > .back-link,
.ticket-context > .eyebrow,
.ticket-context > h1 { display: none; }

.conversation-pane {
  box-sizing: border-box;
  grid-column: 1;
  max-width: 1120px;
  padding: 22px 34px 70px;
}

.conversation-pane > .ticket-thread-header {
  align-items: center;
  background: #f7f9f8;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 7px 14px -14px rgba(22, 54, 39, .45);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: -22px -34px 22px;
  padding: 15px 34px;
  position: relative;
}

.ticket-thread-title { align-items: flex-start; display: flex; gap: 12px; min-width: 0; }
.ticket-thread-title > a {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--green-dark);
  display: flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  text-decoration: none;
}
.ticket-thread-title > div { min-width: 0; }
.ticket-thread-title > div > span { align-items: center; display: flex; gap: 7px; }
.ticket-thread-title b { color: var(--muted); font-size: 10px; }
.ticket-thread-title .status-badge { padding: 3px 7px; }
.ticket-thread-title small { color: var(--muted); font-size: 9px; }
.conversation-pane > .ticket-thread-header h2 {
  font-size: 20px;
  margin: 4px 0 2px;
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-thread-title p { color: var(--muted); font-size: 10px; margin: 0; }

.ticket-header-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 7px; }
.ticket-header-actions > button,
.ticket-header-actions > details > summary {
  background: #fff;
  border: 1px solid #cad7d0;
  border-radius: 8px;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  list-style: none;
  padding: 8px 10px;
}
.ticket-header-actions > details { position: relative; }
.ticket-header-actions > details > summary::-webkit-details-marker { display: none; }
.ticket-header-actions > details > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 14px 38px rgba(25, 45, 36, .14);
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
}
.ticket-header-actions details a,
.ticket-header-actions details button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 9px;
  text-align: left;
  text-decoration: none;
}
.ticket-header-actions details a:hover,
.ticket-header-actions details button:hover { background: var(--green-soft); }
.ticket-header-actions > .internal-create-action > summary {
  background: #fff3dc;
  border-color: #e2b65f;
  color: #754b06;
}
.ticket-header-actions > .internal-create-action > summary span { color: #a86500; font-size: 12px; }
.ticket-header-actions > .internal-create-action > summary:hover,
.ticket-header-actions > .internal-create-action[open] > summary {
  background: #ffe9bd;
  border-color: #d39a2d;
  box-shadow: 0 0 0 3px rgba(216,154,40,.12);
}
.internal-ticket-action {
  align-items: center;
  background: #fff3dc;
  border: 1px solid #e2b65f;
  border-radius: var(--radius-control);
  color: #754b06;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: 750;
  gap: 5px;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
}
.internal-ticket-action span { color: #a86500; }
.internal-ticket-action:hover {
  background: #ffe9bd;
  border-color: #d39a2d;
  box-shadow: 0 0 0 3px rgba(216,154,40,.12);
}
.internal-ticket-action:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.ticket-header-actions > .internal-create-action > .internal-create-popover {
  gap: 12px;
  min-width: 0;
  padding: 15px;
  right: 0;
  width: 500px;
  z-index: 25;
}
.internal-create-popover > header { border-bottom: 1px solid #edf1ef; padding: 2px 2px 10px; }
.internal-create-popover > header div { display: grid; gap: 3px; }
.internal-create-popover > header strong { color: var(--green-dark); font-size: 12px; }
.internal-create-popover > header small { color: var(--muted); font-size: 9px; }
.ticket-header-actions .internal-create-popover form {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticket-header-actions .internal-create-popover label { color: var(--muted); display: grid; font-size: 9px; font-weight: 750; gap: 5px; }
.ticket-header-actions .internal-create-popover input,
.ticket-header-actions .internal-create-popover select,
.ticket-header-actions .internal-create-popover textarea { background: #fff; border: 1px solid #c7d1cc; border-radius: 8px; box-sizing: border-box; color: var(--text); font: inherit; padding: 9px 10px; width: 100%; }
.ticket-header-actions .internal-create-popover input,
.ticket-header-actions .internal-create-popover select { height: 39px; }
.ticket-header-actions .internal-create-popover .wide { grid-column: 1 / -1; }
.ticket-header-actions .internal-create-popover form > button {
  background: var(--green);
  border-radius: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  padding: 10px 13px;
  text-align: center;
}

.message-timeline { display: grid; gap: 0; }
.timeline-gap {
  align-items: center;
  color: #7d8983;
  display: flex;
  gap: 4px;
  height: 38px;
  justify-content: center;
  position: relative;
}
.timeline-gap::before,
.timeline-gap::after {
  background: #dfe7e3;
  content: "";
  height: 1px;
  width: 25px;
}
.timeline-gap > span {
  background: #a9b8b0;
  border-radius: 50%;
  display: block;
  height: 3px;
  width: 3px;
}
.timeline-gap small {
  background: #f4f7f5;
  border: 1px solid #e1e8e4;
  border-radius: 20px;
  font-size: 8px;
  margin-left: 5px;
  padding: 3px 7px;
}
.message-card { display: block; position: relative; width: 100%; }
.message-avatar {
  font-size: 10px;
  height: 30px;
  left: 17px;
  position: absolute;
  top: 17px;
  width: 30px;
  z-index: 1;
}
.message-content {
  border-color: #d5e0da;
  border-left: 3px solid #9fb2a9;
  border-radius: 10px;
  box-sizing: border-box;
  min-height: 66px;
  padding: 15px 17px 15px 61px;
  width: 100%;
}
.message-card.inbound .message-content {
  background: #fff;
  border-color: #d5e0da;
  border-left-color: #9fb2a9;
}
.message-card.outbound .message-content {
  background: #f8fcfa;
  border-color: #b8d8c9;
  border-left-color: var(--green);
}
.message-content > header { margin-bottom: 10px; }
.message-body { font-size: 13px; line-height: 1.58; }
.rich-message-body {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  white-space: normal;
}
.rich-message-body > :first-child { margin-top: 0; }
.rich-message-body > :last-child { margin-bottom: 0; }
.rich-message-body blockquote {
  border-left: 3px solid #c7d3cd;
  margin-left: 0;
  padding-left: 12px;
}
.rich-message-body table { border-collapse: collapse; max-width: 100%; }
.rich-message-body a { color: var(--green); }
.message-direction-label {
  color: #718078;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .55px;
  line-height: 1;
  text-transform: uppercase;
}
.message-card.outbound .message-direction-label { color: var(--green); }

.timeline-note {
  background: #fffdf0;
  border: 1px solid #e9df9f;
  border-left: 3px solid #d2b83f;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  padding: 14px 17px;
  width: 100%;
}
.timeline-note .note-avatar {
  background: #f1e8a9;
  color: #6c5c18;
  flex: 0 0 30px;
  height: 30px;
}
.timeline-note-content { flex: 1; min-width: 0; }
.timeline-note-content > header { align-items: flex-start; display: flex; justify-content: space-between; }
.timeline-note-content > header > div { display: grid; gap: 3px; }
.timeline-note-content > header span {
  color: #88731b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
}
.timeline-note-content .note-kind { align-items: center; display: flex; gap: 7px; }
.timeline-note-content .note-kind em {
  background: #75620f;
  border-radius: 20px;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .35px;
  padding: 3px 7px;
}
.timeline-note.closed-ticket { border-left-color: #75620f; }
.timeline-note-content > header strong { font-size: 11px; }
.timeline-note-content time,
.timeline-note-content > small { color: #8a897e; font-size: 8px; }
.timeline-note-content p { font-size: 12px; line-height: 1.55; margin: 10px 0 7px; white-space: pre-wrap; }

.timeline-internal-ticket {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--internal-note-border);
  border-left: 4px solid var(--internal-note-action);
  border-radius: var(--radius-control);
  box-shadow: inset 0 6px 0 var(--internal-note-surface);
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  margin: 0 auto;
  max-width: min(86%, 680px);
  padding: 12px 14px;
  width: 100%;
}
.timeline-internal-ticket > span {
  align-items: center;
  background: var(--internal-note-bg);
  border-radius: 50%;
  color: var(--internal-note-action);
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
}
.timeline-internal-ticket > div { display: grid; flex: 1; gap: 4px; min-width: 0; }
.timeline-internal-ticket header {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.timeline-internal-ticket header strong { font-size: var(--font-size-small); }
.timeline-internal-ticket time,
.timeline-internal-ticket small { color: var(--muted); font-size: var(--font-size-caption); }
.timeline-internal-ticket a {
  color: var(--green);
  font-size: var(--font-size-small);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.message-timeline > .timeline-note,
.message-timeline > .timeline-internal-ticket {
  margin: 0 auto;
  max-width: 75%;
  width: 75%;
}

.inline-note-composer[hidden] { display: none; }
.inline-note-composer {
  background: #fffdf3;
  border: 1px solid #e4d78d;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(80, 70, 20, .06);
  margin: 14px 0 18px;
  padding: 14px;
}
.inline-note-composer > header { align-items: center; display: flex; justify-content: space-between; }
.inline-note-composer > header > div { align-items: center; display: flex; gap: 9px; }
.inline-note-composer > header > div > span { color: #9b8320; font-size: 18px; }
.inline-note-composer > header > div > div { display: grid; gap: 2px; }
.inline-note-composer > header strong { font-size: 12px; }
.inline-note-composer > header small { color: #8a897e; font-size: 9px; }
.inline-note-composer > header > button { background: transparent; border: 0; color: #817d68; cursor: pointer; font-size: 19px; }
.inline-note-composer .note-form { border: 0; margin: 10px 0 0; padding: 0; }
.inline-note-composer .note-form textarea { background: #fff; border-color: #d9cc7d; min-height: 84px; }
.inline-note-composer .note-form > div { display: flex; gap: 8px; justify-content: flex-end; }
.inline-note-composer .note-form > div > button:not(.secondary-action) {
  background: #8a741b;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  padding: 9px 12px;
}
.inline-note-composer .note-form > div > .note-close-action {
  background: #a32d27;
}

.live-timeline-gap {
  align-items: center;
  color: #6f7d76;
  display: flex;
  gap: 7px;
  justify-content: center;
  min-height: 42px;
  position: relative;
}
.live-timeline-gap::before,
.live-timeline-gap::after {
  background: linear-gradient(90deg, transparent, #d7e2dc);
  content: "";
  height: 1px;
  max-width: 90px;
  width: 8vw;
}
.live-timeline-gap::after { background: linear-gradient(90deg, #d7e2dc, transparent); }
.live-pulse {
  background: var(--green);
  border: 3px solid #dff1e8;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}
.live-timeline-gap small { font-size: 8px; }
.live-timeline-gap strong {
  background: #eef6f2;
  border: 1px solid #d4e5dc;
  border-radius: 20px;
  color: var(--green-dark);
  font-size: 9px;
  min-width: 95px;
  padding: 4px 8px;
  text-align: center;
}

.ticket-ai-panel[hidden] { display: none; }
.ticket-ai-panel {
  background: #f8fcfa;
  border-radius: 10px;
  margin: 12px 0;
  padding: 14px;
}
.ticket-ai-panel .ai-policy { display: none; }
.ticket-ai-panel .ai-empty { padding: 12px; }
.ticket-ai-panel h3 { font-size: 13px; }
.ticket-ai-panel .ai-mark { height: 28px; width: 28px; }

:root {
  /* Shared internal-note palette for email and digital messaging composers. */
  --internal-note-bg: #fff3dc;
  --internal-note-surface: #fff8ec;
  --internal-note-border: #e4b45b;
  --internal-note-border-soft: #efd7a7;
  --internal-note-text: #714c0b;
  --internal-note-action: #a86500;
}
.reply-composer {
  border: 1px solid #b7d7c8;
  border-radius: 11px;
  border-top: 3px solid #62a986;
  box-shadow: 0 8px 28px rgba(24, 55, 41, .07);
  margin: 16px 0 24px;
  padding: 15px;
}
.reply-composer.internal-mode {
  background: var(--internal-note-bg);
  border-color: var(--internal-note-border);
  border-top-color: #d89a28;
  box-shadow: 0 8px 30px rgba(139, 96, 13, .13);
}
.reply-composer.internal-mode > header,
.reply-composer.internal-mode > form,
.reply-composer.internal-mode .rich-reply-editor,
.reply-composer.internal-mode .composer-actions,
.reply-composer.internal-mode .composer-attachment,
.reply-composer.internal-mode .send-form { background: transparent; }
.reply-composer.internal-mode > header { color: var(--internal-note-text); }
.reply-composer.internal-mode .draft-state {
  background: rgba(255, 255, 255, .48);
  color: #7a6540;
}
.reply-composer.internal-mode textarea[name="body"] { background: var(--internal-note-surface); }
.composer-visibility select {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 750;
  padding: 0 18px 0 0;
  cursor: pointer;
}
.reply-composer.internal-mode .reply-mark { color: #a86600; background: #ffedb0; }
.reply-composer.internal-mode .composer-toolbar,
.reply-composer.internal-mode .recipient-details,
.reply-composer.internal-mode .composer-actions,
.reply-composer.internal-mode .composer-attachment {
  border-color: var(--internal-note-border-soft);
}
.reply-composer.internal-mode .composer-toolbar > button,
.reply-composer.internal-mode .composer-toolbar > .composer-ai-form > button,
.reply-composer.internal-mode .composer-toolbar > details > summary,
.reply-composer.internal-mode .composer-attachment > summary { color: var(--internal-note-text); }
.reply-composer.internal-mode .composer-toolbar > button:hover,
.reply-composer.internal-mode .composer-toolbar > .composer-ai-form > button:hover,
.reply-composer.internal-mode .composer-toolbar > details > summary:hover,
.reply-composer.internal-mode .composer-toolbar > details[open] > summary {
  background: rgba(229, 178, 80, .2);
  box-shadow: inset 0 0 0 1px rgba(183, 121, 17, .2);
  color: #754900;
}
.reply-composer.internal-mode .composer-toolbar .composer-ai-button { color: #8b5900; }
.reply-composer.internal-mode .composer-toolbar .composer-ai-button span { background: #9b6200; }
.reply-composer.internal-mode .emoji-popover {
  background: var(--internal-note-surface);
  border-color: var(--internal-note-border-soft);
}
.reply-composer.internal-mode .emoji-popover > strong { color: var(--internal-note-text); }
.reply-composer.internal-mode .emoji-grid button:hover,
.reply-composer.internal-mode .emoji-grid button:focus-visible { background: #f5db9f; }
.reply-composer.internal-mode .reply-format-toolbar {
  background: rgba(255, 255, 255, .45);
  border-color: var(--internal-note-border-soft);
}
.reply-composer.internal-mode .reply-format-toolbar button:hover,
.reply-composer.internal-mode .reply-format-toolbar button:focus-visible,
.reply-composer.internal-mode .reply-format-toolbar button[aria-pressed="true"] {
  background: #f5db9f;
  color: #684100;
}
.reply-composer.internal-mode .reply-format-toolbar .format-divider { background: #dbbc7b; }
.reply-composer.internal-mode .rich-reply-editor {
  color: #322b1f;
  min-height: 210px;
}
.reply-composer.internal-mode .rich-reply-editor:focus {
  box-shadow: inset 3px 0 0 #d99a28;
  padding-left: 12px;
}
.reply-composer.internal-mode .rich-reply-editor:empty::before { color: #8a7551; }
.reply-composer.internal-mode .autosave-state { color: #7b6846; }
.reply-composer.internal-mode .draft-discard-button { color: #806d49; }
.reply-composer.internal-mode .draft-discard-button:hover,
.reply-composer.internal-mode .draft-discard-button:focus-visible { background: #f5ddb0; color: var(--danger); }
.reply-composer.internal-mode .send-form {
  border-top: 1px solid var(--internal-note-border-soft);
}
.reply-composer.internal-mode .send-button { background: var(--internal-note-action); }
.reply-composer.internal-mode .send-form select:focus {
  border-color: var(--internal-note-border);
  box-shadow: 0 0 0 3px rgba(216, 154, 40, .18);
}
.collaboration-live { display:flex; gap:12px; align-items:center; min-height:30px; color:var(--muted); font-size:11px; }
.collaboration-live strong { color:#a86600; font-weight:750; }
.compose-email-page { max-width:920px; margin:0 auto; padding:32px; }
.compose-email-page>header { display:flex; justify-content:space-between; gap:24px; align-items:start; margin-bottom:24px; }
.compose-email-form { display:grid; gap:16px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.compose-email-form label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }
.compose-email-form input,.compose-email-form select,.compose-email-form textarea { width:100%; border:1px solid #c7d1cc; border-radius:8px; padding:10px; font:inherit; color:var(--text); }
.compose-email-form textarea { resize:vertical; line-height:1.55; }
.compose-email-actions { display:flex; justify-content:flex-end; gap:10px; }
.reply-composer > header { margin-bottom: 10px; }
.reply-composer > header strong { font-size: 13px; }
.reply-mark { height: 28px; width: 28px; }

.composer-toolbar {
  align-items: center;
  border-bottom: 1px solid #e7eeea;
  border-top: 1px solid #e7eeea;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 -15px 8px;
  padding: 7px 15px;
}
.composer-toolbar > button,
.composer-toolbar > .composer-ai-form > button,
.composer-toolbar > details > summary {
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #53615a;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  list-style: none;
  padding: 7px 9px;
}
.composer-toolbar > button:hover,
.composer-toolbar > .composer-ai-form > button:hover,
.composer-toolbar > details > summary:hover { background: #eef6f2; color: var(--green-dark); }
.composer-toolbar > details[open] > summary {
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px #c9e4d6;
  color: var(--green);
}
.composer-toolbar .composer-ai-button { color: var(--green); }
.composer-toolbar .composer-ai-button span {
  background: var(--green);
  border-radius: 10px;
  color: #fff;
  display: inline-grid;
  font-size: 8px;
  margin-left: 3px;
  min-width: 15px;
  padding: 2px 4px;
  place-items: center;
}
.composer-ai-form { margin: 0; }
.composer-ai-form .composer-ai-button:disabled { cursor: not-allowed; opacity: .55; }
.composer-toolbar > details { position: relative; }
.composer-toolbar > details > summary::-webkit-details-marker { display: none; }
.composer-popover {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(20, 44, 33, .15);
  left: 0;
  min-width: 390px;
  padding: 10px;
  position: absolute;
  top: calc(100% + 7px);
  z-index: 7;
}
.composer-popover .macro-quick-apply,
.composer-popover .copilot-tools { border: 0; margin: 0; padding: 0; }
.composer-popover .macro-quick-apply { background: transparent; }
.composer-popover .copilot-tools { background: transparent; }
.composer-popover .copilot-tools button:hover:not(:disabled),
.composer-popover .copilot-tools button:focus-visible,
.composer-popover .copilot-tools button.is-processing {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.composer-popover .copilot-tools button:disabled,
.composer-popover .copilot-tools select:disabled { cursor: not-allowed; opacity: .45; }
.composer-emoji-menu .emoji-popover {
  box-sizing: border-box;
  left: auto;
  min-width: 268px;
  right: 0;
  width: 288px;
}
.emoji-popover > strong {
  color: var(--green-dark);
  display: block;
  font-size: 10px;
  margin: 2px 4px 8px;
}
.emoji-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(8, 1fr);
}
.emoji-grid button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 31px;
  justify-content: center;
  padding: 2px;
  width: 31px;
}
.emoji-grid button:hover,
.emoji-grid button:focus-visible {
  background: #e8f3ed;
  outline: 2px solid transparent;
  transform: translateY(-1px);
}
.copilot-hint {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 9px;
  margin: 3px 0 0;
}
.copilot-hint a { color: var(--green); font-weight: 750; }
.ai-configuration-warning {
  align-items: center;
  background: #fff8e8;
  border: 1px solid #ecd9a8;
  border-radius: 9px;
  color: #74591d;
  display: flex;
  gap: 9px;
  margin: 10px 0;
  padding: 10px 12px;
}
.ai-configuration-warning span { flex: 1; font-size: 10px; }
.ai-configuration-warning a { color: var(--green); font-size: 10px; font-weight: 750; }

.recipient-details { border-bottom: 1px solid #edf1ef; margin-bottom: 6px; }
.recipient-details > summary {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 8px 2px;
}
.recipient-details > summary::-webkit-details-marker { display: none; }
.recipient-details > summary span { font-size: 10px; }
.recipient-details > summary strong {
  color: var(--text);
  flex: 1;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipient-details > summary small { color: var(--green); font-size: 9px; }
.recipient-details > summary b { color: var(--green); font-size: 9px; font-weight: 700; }
.recipient-details .recipient-composer { margin: 0 0 9px; }
.recipient-token-field {
  align-items: center;
  background: #fff;
  border: 1px solid #c7d1cc;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 42px;
  padding: 5px 7px;
}
.recipient-token-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 122, 79, .1); }
.recipient-token-list { display: contents; }
.recipient-token {
  align-items: center;
  background: #eef4f1;
  border: 1px solid #c7d8d0;
  border-radius: 18px;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  max-width: 100%;
  padding: 5px 7px 5px 10px;
}
.recipient-token button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.recipient-token-field input[data-recipient-entry] {
  border: 0;
  box-shadow: none;
  flex: 1 1 150px;
  height: 28px;
  min-width: 120px;
  outline: 0;
  padding: 0 4px;
}
.recipient-token-field input[data-recipient-entry][aria-invalid="true"] { color: var(--danger); }
.composer-notices { scroll-margin-top: 18px; }
.composer-notices .ticket-notice { margin: 14px 0 -10px; }

.reply-format-toolbar {
  align-items: center;
  background: #f3f6f4;
  border: 1px solid #dce7e1;
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: 4px;
  padding: 2px;
  width: fit-content;
}
.reply-format-toolbar button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #3f4c46;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 10px;
  height: 26px;
  justify-content: center;
  min-width: 26px;
  padding: 3px 5px;
}
.reply-format-toolbar button:hover,
.reply-format-toolbar button:focus-visible {
  background: #dfece6;
  color: var(--green-dark);
  outline: none;
}
.reply-format-toolbar button[aria-pressed="true"] {
  background: #cee5da;
  box-shadow: inset 0 0 0 1px #a9cebc;
  color: var(--green-dark);
}
.reply-format-toolbar .format-divider {
  background: #ccd8d2;
  height: 17px;
  margin: 0 2px;
  width: 1px;
}
.rich-reply-editor {
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  min-height: 190px;
  outline: none;
  overflow-wrap: anywhere;
  padding: 12px 2px;
  white-space: pre-wrap;
}
.rich-reply-editor:empty::before {
  color: #7a847f;
  content: attr(data-placeholder);
  pointer-events: none;
}
.rich-reply-editor blockquote {
  border-left: 3px solid #b7c9c0;
  color: #53615a;
  margin: 8px 0;
  padding-left: 12px;
}
.rich-reply-editor ol,
.rich-reply-editor ul { margin: 7px 0; padding-left: 25px; }
.rich-reply-editor a { color: var(--green); text-decoration: underline; }
.rich-reply-editor[contenteditable="false"] { cursor: not-allowed; opacity: .65; }
.agent-signature-preview { border-top: 1px dashed var(--line); }
.composer-actions { border-top: 1px solid #edf1ef; margin: 0; padding-top: 8px; }
.draft-discard-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 6px;
}
.draft-discard-button:hover,
.draft-discard-button:focus-visible { background: #f1f4f2; color: var(--danger); }
.draft-discard-button:disabled { cursor: not-allowed; opacity: .4; }
.draft-discard-button svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }

.composer-attachment { border-top: 1px solid #edf1ef; }
.composer-attachment > summary {
  color: var(--green-dark);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  list-style: none;
  padding: 10px 2px;
}
.composer-attachment > summary::-webkit-details-marker { display: none; }
.attachment-composer { padding: 5px 0 12px; }

.send-form {
  align-items: flex-end;
  background: #fbfdfc;
  margin: 0 -15px -15px;
  padding: 11px 15px;
}
.send-form > label { width: 150px; }
.send-button { min-width: 92px; }
.ticket-draft-label {
  color: #d93025;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  margin-left: 7px;
}
.internal-notes { margin: 18px 0 35px; }

@media (max-width: 1050px) {
  .ticket-workspace.collaboration-workspace.context-open { grid-template-columns: minmax(0, 1fr); }
  .ticket-workspace.context-open .ticket-context {
    box-shadow: -16px 0 50px rgba(20, 40, 31, .16);
    display: block;
    max-width: min(340px, 88vw);
    position: fixed;
    right: 0;
    top: 70px;
    z-index: 20;
  }
}

@media (max-width: 720px) {
  .conversation-pane { padding: 16px 12px 50px; }
  .conversation-pane > .ticket-thread-header { margin: -16px -12px 15px; padding: 10px 12px; }
  .ticket-thread-title small,
  .ticket-thread-title p,
  .ticket-header-actions > button:first-child { display: none; }
  .conversation-pane > .ticket-thread-header h2 { font-size: 16px; max-width: 55vw; }
  .ticket-header-actions > button { font-size: 0; }
  .ticket-header-actions > button::first-letter { font-size: 13px; }
  .ticket-header-actions > .internal-create-action > summary { font-size: 0; padding: 8px 10px; }
  .ticket-header-actions > .internal-create-action > summary span { font-size: 13px; }
  .ticket-header-actions > .internal-create-action > .internal-create-popover {
    left: 12px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    position: fixed;
    right: 12px;
    top: 76px;
    width: auto;
  }
  .ticket-header-actions .internal-create-popover form { grid-template-columns: 1fr; }
  .ticket-header-actions .internal-create-popover .wide { grid-column: 1; }
  .message-timeline > .timeline-note,
  .message-timeline > .timeline-internal-ticket { max-width: 100%; width: 100%; }
  .composer-toolbar { overflow: visible; }
  .composer-popover { left: auto; min-width: min(380px, calc(100vw - 54px)); right: -90px; }
  .composer-emoji-menu .emoji-popover {
    left: -16px;
    min-width: 0;
    right: auto;
    width: 174px;
  }
  .composer-emoji-menu .emoji-grid { grid-template-columns: repeat(4, 1fr); }
  .send-form { align-items: stretch; }
}