GIA/core/static/css/compose-panel.css

.compose-shell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.compose-shell .compose-shell-head {
  gap: 0.75rem;
}

.compose-shell .compose-shell-eyebrow,
.compose-shell .compose-meta-line,
.compose-shell .compose-empty,
.compose-shell .compose-typing,
.compose-shell .compose-msg-meta,
.compose-shell .compose-reply-banner-label {
  color: var(--bulma-text-weak, #6b7280);
}

.compose-shell .compose-shell-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compose-shell .compose-context-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.compose-shell .compose-context-primary {
  flex: 1 1 auto;
  min-width: 0;
}

.compose-shell .compose-context-secondary {
  flex: 0 0 11rem;
  min-width: 9rem;
}

.compose-shell .compose-contact-switch,
.compose-shell .compose-platform-switch {
  margin-top: 0;
}

.compose-shell .compose-contact-switch .select,
.compose-shell .compose-platform-switch .select,
.compose-shell .compose-contact-switch select,
.compose-shell .compose-platform-switch select {
  width: 100%;
}

.compose-shell .compose-status {
  min-height: 0;
}

.compose-shell .compose-status .button {
  margin-top: 0.5rem;
}

.compose-shell .compose-status-line {
  margin: 0;
  font-size: 0.875rem;
}

.compose-shell .compose-status-line.is-warning,
.compose-shell .compose-status-line.is-danger {
  color: var(--bulma-danger, #cc0f35);
}

.compose-shell .compose-status-line.is-success {
  color: var(--bulma-success, #257953);
}

.gia-widget-control.gia-widget-control-no-scroll > .compose-shell {
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.gia-widget-control.gia-widget-control-no-scroll > .compose-shell .compose-shell-head,
.gia-widget-control.gia-widget-control-no-scroll > .compose-shell .compose-status,
.gia-widget-control.gia-widget-control-no-scroll > .compose-shell .compose-form {
  flex: 0 0 auto;
}

.gia-widget-control.gia-widget-control-no-scroll > .compose-shell .compose-thread {
  flex: 1 1 80%;
  min-height: 0;
  max-height: none;
}

.compose-shell .compose-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--bulma-border, #dbdbdb);
  background: var(--bulma-scheme-main-bis, #f7f8fa);
}

.compose-shell .compose-empty,
.compose-shell .compose-typing {
  margin: 0;
  font-size: 0.875rem;
}

.compose-shell .compose-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.compose-shell .compose-row.is-in {
  align-items: flex-start;
}

.compose-shell .compose-row.is-out {
  align-items: flex-end;
}

.compose-shell .compose-row.is-deleted .compose-bubble {
  opacity: 0.85;
}

.compose-shell .compose-row.is-target-flash .compose-bubble,
.compose-shell .compose-row.compose-reply-selected .compose-bubble {
  box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.24);
}

.compose-shell .compose-bubble {
  width: fit-content;
  max-width: min(42rem, 100%);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 1rem;
  background: var(--bulma-scheme-main, #fff);
}

.compose-shell .compose-bubble.is-out {
  border-color: rgba(50, 115, 220, 0.2);
  background: var(--bulma-link-light, #eef6fc);
}

.compose-shell .compose-reply-ref {
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--bulma-border, #dbdbdb);
}

.compose-shell .compose-reply-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bulma-link, #3273dc);
  font-size: 0.75rem;
  text-align: left;
}

.compose-shell .compose-reply-link:hover {
  text-decoration: underline;
}

.compose-shell .compose-source-badge-wrap {
  margin-bottom: 0.5rem;
}

.compose-shell .compose-source-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.compose-shell .compose-media {
  margin: 0 0 0.5rem;
}

.compose-shell .compose-media:last-of-type {
  margin-bottom: 0.625rem;
}

.compose-shell .compose-image {
  display: block;
  max-width: min(26rem, 100%);
  max-height: 24rem;
  border-radius: 0.75rem;
}

.compose-shell .compose-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.compose-shell .compose-image-fallback.is-hidden {
  display: none;
}

.compose-shell .compose-body + .compose-edit-history,
.compose-shell .compose-media + .compose-body,
.compose-shell .compose-body + .compose-reactions,
.compose-shell .compose-reactions + .compose-msg-meta,
.compose-shell .compose-edit-history + .compose-reactions,
.compose-shell .compose-edit-history + .compose-msg-meta {
  margin-top: 0.5rem;
}

.compose-shell .compose-edit-history {
  font-size: 0.75rem;
}

.compose-shell .compose-edit-history summary {
  cursor: pointer;
}

.compose-shell .compose-edit-history ul {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.compose-shell .compose-edit-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.compose-shell .compose-edit-old {
  text-decoration: line-through;
  opacity: 0.72;
}

.compose-shell .compose-edit-arrow {
  opacity: 0.55;
}

.compose-shell .compose-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.compose-shell .compose-reaction-chip {
  min-height: 1.7rem;
  font-size: 0.875rem;
}

.compose-shell .compose-msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.compose-shell .compose-msg-flag {
  font-size: 0.6875rem;
  text-transform: lowercase;
}

.compose-shell .compose-msg-flag.is-edited {
  color: var(--bulma-warning-dark, #7a5a00);
}

.compose-shell .compose-msg-flag.is-deleted {
  color: var(--bulma-danger, #cc0f35);
}

.compose-shell .compose-reply-btn {
  margin-top: 0.5rem;
}

.compose-shell .compose-form {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.compose-shell .compose-form-main {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.compose-shell .compose-send-safety {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 0 0 auto;
  min-width: 8.5rem;
}

.compose-shell .compose-form-main .gia-send-composer {
  flex: 1 1 auto;
}

.compose-shell .compose-reply-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 0.75rem;
  background: var(--bulma-scheme-main-bis, #f7f8fa);
}

.compose-shell .compose-reply-banner.is-hidden {
  display: none;
}

.compose-shell .compose-reply-banner-label {
  font-size: 0.75rem;
  font-weight: 700;
}

.compose-shell .compose-reply-banner-text {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.compose-shell .compose-textarea {
  height: 100%;
}

.compose-shell .compose-send-btn {
  flex: 0 0 auto;
}

.compose-shell .compose-persistent-cancel {
  margin-top: 0.5rem;
}

.compose-shell.is-send-success .compose-composer-capsule {
  border-color: rgba(35, 209, 96, 0.55);
}

.compose-shell.is-send-fail .compose-composer-capsule {
  border-color: rgba(255, 56, 96, 0.55);
}

@media (max-width: 768px) {
  .compose-shell .compose-context-row {
    flex-wrap: wrap;
  }

  .compose-shell .compose-context-secondary {
    flex: 1 1 100%;
    min-width: 0;
  }

  .compose-shell .compose-form-main {
    flex-wrap: wrap;
  }

  .compose-shell .compose-send-safety {
    min-width: 0;
  }

  .compose-shell .compose-thread {
    min-height: 18rem;
  }

  .compose-shell .compose-bubble {
    max-width: 100%;
  }

  .compose-shell .compose-send-btn {
    width: 100%;
  }
}