
#message-compose.cc-composer,
.cc-menu {
  --cc-page: #17191d;
  --cc-panel: #202328;
  --cc-cardinal: #bd2f51;
  --cc-rose: #ec6e90;
  --cc-gold: #d6b15c;
  --cc-violet: #ad9fd6;
  --cc-text: #f0eeef;
  --cc-muted: #a3a5af;
}
#message-compose.cc-composer [hidden], .cc-menu[hidden] { display: none !important; }
#message-compose.cc-composer .chat-compose-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: visible;
}  
#message-compose.cc-composer .chat-compose-input:focus-within { border-color: var(--cc-violet); box-shadow: 0 0 0 1px #ad9fd626; }
#message-compose.cc-composer #message-text {
  grid-column: 1 / -1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  max-height: 260px;
  margin: 0;
  padding: 14px 15px 8px;
  resize: none;
  border: 0;
  border-radius: 10px 10px 0 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--cc-text);
  font: 14px/1.5 system-ui, -apple-system, sans-serif;
}
#message-compose.cc-composer #message-text::placeholder { color: var(--cc-muted); opacity: 1; }
#message-compose.cc-composer .captain-line-tools { margin-bottom: 9px; padding: 0 2px; gap: 8px; }
#message-compose.cc-composer .cc-bottom { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 6px 10px 9px 9px; }
#message-compose.cc-composer .cc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
#message-compose.cc-composer :is(.cc-plus, .cc-model-trigger) {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-height: 34px; height: 34px; width: auto; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; color: var(--cc-text); cursor: pointer;
  font: 600 12px/1.2 system-ui, -apple-system, sans-serif;
}
#message-compose.cc-composer .cc-plus { position: relative; width: 34px; border: 1px solid #a3a5af60; border-radius: 50%; }
#message-compose.cc-composer .cc-model-trigger { gap: 8px; padding: 0 7px; border-radius: 4px; min-width: 0; }
#message-compose.cc-composer .cc-model-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#message-compose.cc-composer .cc-model-trigger svg { width: 14px; height: 14px; color: var(--cc-muted); }
#message-compose.cc-composer :is(.cc-plus, .cc-model-trigger) svg, .cc-menu svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#message-compose.cc-composer .cc-plus .cc-exo-insignia { width: 20px; height: 20px; fill: #f0eeef; stroke: none; transform: translate(-1px, -1px); transition: none; }
#message-compose.cc-composer .cc-plus .cc-add-badge { position: absolute; left: calc(50% + 6px); top: calc(50% + 5px); width: 8px; height: 8px; border-radius: 50%; background: var(--cc-panel); box-shadow: 0 0 0 .75px var(--cc-panel); color: #f0eeef; stroke-width: 2.8; }
#message-compose.cc-composer .cc-plus:hover .cc-exo-insignia,
#message-compose.cc-composer .cc-plus:focus-visible .cc-exo-insignia { filter: drop-shadow(0 0 3px #f0eeef66); }
#message-compose.cc-composer :is(.cc-plus, .cc-model-trigger):hover,
#message-compose.cc-composer :is(.cc-plus, .cc-model-trigger)[aria-expanded="true"] { background: #ad9fd618; color: var(--cc-text); }
#message-compose.cc-composer .cc-plus[aria-expanded="true"] { border-color: var(--cc-violet); }
#message-compose.cc-composer .cc-seat-model { color: var(--cc-muted); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
#message-compose.cc-composer #message-send {
  grid-column: 2; grid-row: 2; align-self: center; margin: 6px 9px 9px 0;
}
#message-compose.cc-composer :is(.cc-plus, .cc-model-trigger):focus-visible,
.cc-menu button:focus-visible { outline: 2px solid var(--cc-violet); outline-offset: 3px; }
.cc-menu {
  font-family: system-ui, -apple-system, sans-serif;
  position: fixed; z-index: 10020; box-sizing: border-box;
  width: 300px; padding: 7px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid #a3a5af66; border-radius: 9px;
  background: var(--cc-panel); color: var(--cc-text);
  box-shadow: 0 12px 32px #17191dcc, 0 2px 8px #17191d99;
  font-size: 13px; line-height: 1.4; text-align: left;
}
.cc-menu * { box-sizing: border-box; }
.cc-menu .cc-menu-heading { padding: 8px 9px 11px; color: var(--cc-muted); font-size: 11px; letter-spacing: .05em; font-weight: 650; }
.cc-menu .cc-model-option {
  display: grid; grid-template-columns: minmax(0, 1fr) 12px; grid-template-rows: auto auto;
  gap: 2px 12px; width: 100%; min-height: 56px; margin: 0; padding: 9px;
  border: 0; border-radius: 4px; background: transparent; color: var(--cc-text); box-shadow: none;
  font: 600 13px/1.4 system-ui, -apple-system, sans-serif; cursor: pointer; text-align: left;
}
.cc-menu .cc-option-detail { grid-column: 1; color: var(--cc-muted); font-size: 11px; font-weight: 400; }
.cc-menu .cc-choice-mark { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 7px; height: 7px; border: 1px solid #a3a5af66; border-radius: 50%; }
.cc-menu .cc-model-option[aria-checked="true"] { background: #ad9fd614; }
.cc-menu .cc-model-option[aria-checked="true"] .cc-choice-mark { background: var(--cc-rose); border-color: var(--cc-rose); }
.cc-menu .cc-model-option:hover:not(:disabled), .cc-menu .cc-picture:hover:not(:disabled) { background: #ad9fd621; }
.cc-menu .cc-model-option:disabled, .cc-menu .cc-picture:disabled { opacity: .5; cursor: default; }
.cc-menu .cc-settings { display: grid; grid-template-columns: 1fr auto; gap: 5px 18px; padding: 12px 9px 5px; margin: 8px 0 0; border-top: 1px solid #a3a5af33; font-size: 12px; }
.cc-menu .cc-settings dt, .cc-menu .cc-settings dd { margin: 0; }
.cc-menu .cc-settings dt { color: var(--cc-muted); }
.cc-menu .cc-settings dd { text-align: right; }
.cc-menu .cc-settings-note { grid-column: 1 / -1; margin-top: 3px; color: var(--cc-muted); font-size: 11px; }
.cc-menu .cc-menu-note { margin: 7px 9px; color: var(--cc-gold); font-size: 12px; }
.cc-menu .cc-menu-note:empty { display: none; }
.cc-menu .cc-picture {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; margin: 0; padding: 8px 10px;
  border: 0; border-radius: 4px; background: transparent; box-shadow: none; color: var(--cc-text);
  font: 500 13px/1.4 system-ui, -apple-system, sans-serif; cursor: pointer;
}
.cc-menu .cc-picture svg { width: 18px; height: 18px; color: var(--cc-violet); }
.cc-menu .cc-menu-hint { margin: 7px 10px 6px; color: var(--cc-muted); font-size: 11px; line-height: 1.5; }
@media (min-width: 2400px) {
  #message-compose.cc-composer #message-text { font-size: 17px; min-height: 108px; padding: 17px 18px 10px; }
  #message-compose.cc-composer .cc-bottom { padding: 8px 12px 12px; }
  #message-compose.cc-composer #message-send { margin: 8px 12px 12px 0; }
  #message-compose.cc-composer :is(.cc-model-trigger, .cc-seat-model) { font-size: 15px; }
  #message-compose.cc-composer :is(.cc-plus, .cc-model-trigger) { min-height: 42px; height: 42px; }
  #message-compose.cc-composer .cc-plus { width: 42px; }
  #message-compose.cc-composer .cc-model-name { max-width: 260px; }
  .cc-menu .cc-model-option, .cc-menu .cc-picture { font-size: 15px; }
  .cc-menu :is(.cc-option-detail, .cc-menu-heading, .cc-menu-hint, .cc-settings-note) { font-size: 12px; }
  .cc-menu .cc-settings { font-size: 14px; }
}
@media (max-width: 520px) {
  #message-compose.cc-composer .cc-actions { gap: 5px; }
  #message-compose.cc-composer .cc-seat-model { max-width: 150px; font-size: 11px; }
  #message-compose.cc-composer .cc-model-name { max-width: 135px; }
}
@media (forced-colors: active) {
  .cc-menu, #message-compose.cc-composer .chat-compose-input { border: 1px solid CanvasText; }
  .cc-menu .cc-model-option[aria-checked="true"] { outline: 1px solid Highlight; }
}


@media (min-width: 2400px) { #message-compose.cc-composer .cc-plus .cc-exo-insignia { width: 24px; height: 24px; } #message-compose.cc-composer .cc-plus .cc-add-badge { left: calc(50% + 8px); top: calc(50% + 7px); width: 10px; height: 10px; } }
