turbo_chat 0.2.0 → 0.3.0

data/app/assets/stylesheets/turbo_chat/application.css

@@ -1,1646 +1,9 @@
-:root {
-  --chat-text: #12263f;
-  --chat-muted: #5f738a;
-  --chat-border: #c9d5e3;
-  --chat-border-strong: #b9c8d9;
-  --chat-surface: #ffffff;
-  --chat-surface-soft: #f6f9fd;
-  --chat-primary: #1f6edc;
-  --chat-primary-dark: #1452ac;
-  --chat-primary-soft: #e7f1ff;
-  --chat-mention-highlight-color: #b42318;
-  --chat-mention-mark-background: #b4231838;
-  --chat-danger: #b42318;
-  --chat-danger-soft: #fff1f3;
-  --chat-success: #1f7a40;
-  --chat-success-soft: #ecfdf3;
-  --chat-shadow: 0 20px 48px rgba(16, 36, 58, 0.12);
-}
-
-html,
-body {
-  width: 100%;
-  max-width: 100%;
-  min-height: 100%;
-  overflow-x: hidden;
-}
-
-html.chat-page-scroll-locked,
-body.chat-page-scroll-locked {
-  overflow: hidden;
-  overscroll-behavior: none;
-}
-
-.chat-global-scrollbar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 14px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  z-index: 40;
-  background: transparent;
-  overscroll-behavior: none;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(61, 94, 133, 0.42) transparent;
-}
-
-.chat-global-scrollbar::-webkit-scrollbar {
-  width: 12px;
-}
-
-.chat-global-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.chat-global-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: rgba(61, 94, 133, 0.42);
-  border: 3px solid transparent;
-  background-clip: content-box;
-}
-
-.chat-global-scrollbar-spacer {
-  width: 1px;
-  min-height: 100%;
-}
-
-.chat-global-scrollbar--hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-
-body {
-  margin: 0;
-  min-height: 100dvh;
-  min-height: 100svh;
-  color: var(--chat-text);
-  background:
-    radial-gradient(960px circle at 0% 0%, #e6f1ff 0%, rgba(230, 241, 255, 0) 52%),
-    radial-gradient(920px circle at 100% 0%, #fff3e8 0%, rgba(255, 243, 232, 0) 48%),
-    linear-gradient(180deg, #f9fbff 0%, #f2f5fa 100%);
-  font-family: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif;
-}
-
-.chat-shell {
-  box-sizing: border-box;
-  width: min(1080px, calc(100% - 28px));
-  margin: 24px auto 36px;
-  padding: clamp(16px, 2.5vw, 28px);
-  border: 1px solid rgba(201, 213, 227, 0.85);
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.82);
-  box-shadow: var(--chat-shadow);
-  backdrop-filter: blur(4px);
-}
-
-.chat-shell--closed {
-  border-color: rgba(191, 203, 217, 0.9);
-}
-
-.chat-shell--style-unbounded {
-  --chat-unbounded-side-padding: clamp(12px, 4vw, 56px);
-  --chat-unbounded-inline-start: calc(var(--chat-unbounded-side-padding) + env(safe-area-inset-left));
-  --chat-unbounded-inline-end: calc(var(--chat-unbounded-side-padding) + env(safe-area-inset-right));
-  --chat-floating-composer-clearance: clamp(84px, 11vh, 120px);
-  width: 100%;
-  max-width: none;
-  height: 100vh;
-  height: 100dvh;
-  max-height: 100vh;
-  max-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  min-height: 100svh;
-  min-height: 100dvh;
-  margin: 0;
-  padding-top: clamp(14px, 2.5vw, 28px);
-  padding-right: var(--chat-unbounded-inline-end);
-  padding-bottom: calc(12px + env(safe-area-inset-bottom));
-  padding-left: var(--chat-unbounded-inline-start);
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  backdrop-filter: none;
-  overflow: hidden;
-}
-
-.chat-shell--style-unbounded .chat-header,
-.chat-shell--style-unbounded .chat-members,
-.chat-shell--style-unbounded .chat-invite,
-.chat-shell--style-unbounded .chat-banner {
-  width: 100%;
-  max-width: 980px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.chat-shell--style-unbounded .chat-window {
-  --chat-window-padding: 0px;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  background: transparent;
-  box-shadow: none;
-  overflow: hidden;
-  flex: 1 1 auto;
-}
-
-.chat-shell--style-unbounded .chat-window::before {
-  display: none;
-}
-
-.chat-shell--style-unbounded .chat-messages {
-  min-height: 0;
-  width: 100%;
-  max-width: 980px;
-  min-width: 0;
-  flex: 1 1 auto;
-  margin: 0 auto;
-  max-height: calc(100dvh - var(--chat-floating-composer-clearance));
-  padding: 6px 2px calc(8px + var(--chat-signal-offset) + var(--chat-floating-composer-clearance));
-  scroll-padding-bottom: calc(var(--chat-floating-composer-clearance) + 12px);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, 0.55) 28px, #000 72px, #000 100%);
-  mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, 0.55) 28px, #000 72px, #000 100%);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-
-.chat-shell--style-unbounded .chat-messages::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.chat-shell--style-unbounded .chat-signals {
-  left: 50%;
-  right: auto;
-  width: 100%;
-  max-width: 980px;
-  bottom: calc(var(--chat-floating-composer-clearance) + 4px);
-  transform: translate(-50%, 6px);
-}
-
-.chat-shell--style-unbounded .chat-signals--active {
-  transform: translate(-50%, 0);
-}
-
-.chat-shell--style-unbounded .chat-composer {
-  box-sizing: border-box;
-  position: fixed;
-  left: var(--chat-unbounded-inline-start);
-  right: var(--chat-unbounded-inline-end);
-  width: auto;
-  bottom: max(12px, env(safe-area-inset-bottom), env(keyboard-inset-bottom, 0px));
-  z-index: 20;
-  margin: 0;
-  background: transparent;
-}
-
-.chat-shell--style-unbounded .chat-composer .chat-form {
-  width: 100%;
-  max-width: 980px;
-  margin-left: auto;
-  margin-right: auto;
-  background: transparent;
-}
-
-.chat-shell--style-unbounded .chat-composer-shell {
-  border-radius: 22px;
-  background: #ffffff;
-  border-color: #b6cbe6;
-  box-shadow: 0 14px 34px rgba(17, 40, 70, 0.2);
-  backdrop-filter: blur(7px);
-}
-
-.chat-shell--style-unbounded .chat-composer-shell:focus-within {
-  box-shadow: 0 0 0 3px rgba(31, 110, 220, 0.16), 0 14px 34px rgba(17, 40, 70, 0.22);
-}
-
-.chat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 18px;
-  margin-bottom: 16px;
-}
-
-.chat-header-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.chat-header-kicker {
-  margin: 0;
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  font-weight: 700;
-  color: var(--chat-muted);
-}
-
-.chat-header-title-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.chat-header h1 {
-  margin: 0;
-  font-size: clamp(30px, 3vw, 44px);
-  line-height: 1.04;
-  letter-spacing: -0.02em;
-  overflow-wrap: anywhere;
-}
-
-.chat-status {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  padding: 5px 11px;
-}
-
-.chat-status--open {
-  color: #0f6632;
-  background: #e8f7ef;
-  border: 1px solid #a6dfbb;
-}
-
-.chat-status--closed {
-  color: #995f00;
-  background: #fff4dd;
-  border: 1px solid #f0cf90;
-}
-
-.chat-header-actions {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.chat-inline-form {
-  margin: 0;
-}
-
-.chat-invite {
-  margin: 0 0 14px;
-  padding: 10px 12px;
-  border-radius: 14px;
-  border: 1px dashed var(--chat-border-strong);
-  background: rgba(247, 251, 255, 0.72);
-}
-
-.chat-members {
-  --chat-members-expanded-max-height: 420px;
-  margin: 0 0 14px;
-  padding: 10px 12px;
-  border-radius: 14px;
-  border: 1px solid var(--chat-border);
-  background: rgba(247, 251, 255, 0.72);
-}
-
-.chat-members-panel {
-  margin: 0;
-}
-
-.chat-members-summary {
-  list-style: none;
-  margin: 0;
-  padding: 2px 4px;
-  font-size: 14px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  color: #1c3a5f;
-}
-
-.chat-members-summary::-webkit-details-marker {
-  display: none;
-}
-
-.chat-members-summary::after {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-right: 2px solid #4a678a;
-  border-bottom: 2px solid #4a678a;
-  transform: rotate(45deg);
-  transition: transform 120ms ease;
-}
-
-.chat-members-panel[open] .chat-members-summary::after {
-  transform: rotate(225deg);
-}
-
-.chat-members-content {
-  display: block;
-  margin-top: 8px;
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  transform: translateY(-3px);
-  visibility: hidden;
-  transition:
-    max-height 240ms ease,
-    opacity 180ms ease,
-    transform 180ms ease,
-    visibility 0s linear 240ms;
-}
-
-.chat-members-panel:not([open]) > .chat-members-content {
-  display: block;
-}
-
-.chat-members-panel[open] > .chat-members-content {
-  max-height: var(--chat-members-expanded-max-height);
-  opacity: 1;
-  transform: translateY(0);
-  visibility: visible;
-  transition:
-    max-height 280ms ease,
-    opacity 220ms ease,
-    transform 220ms ease,
-    visibility 0s linear 0s;
-}
-
-.chat-members-invite {
-  display: flex;
-  align-items: center;
-  margin: 0 0 7px;
-  padding: 7px 10px;
-  min-height: 42px;
-  border-radius: 10px;
-  border: 1px solid #d9e5f2;
-  background: #ffffff;
-}
-
-.chat-members-invite--hint {
-  display: flex;
-  align-items: center;
-}
-
-.chat-members-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 7px;
-}
-
-.chat-members-list-shell {
-  max-height: 216px;
-  overflow-y: auto;
-  padding-right: 2px;
-}
-
-.chat-members-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 7px 10px;
-  min-height: 42px;
-  border-radius: 10px;
-  background: #ffffff;
-  border: 1px solid #d9e5f2;
-}
-
-.chat-members-item--hint {
-  justify-content: flex-start;
-}
-
-.chat-members-item-main {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.chat-members-name {
-  font-weight: 700;
-  overflow-wrap: anywhere;
-}
-
-.chat-members-role {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  border: 1px solid #d2deed;
-  background: #edf4ff;
-  color: #2a4e78;
-  font-size: 12px;
-  padding: 2px 8px;
-  white-space: nowrap;
-}
-
-.chat-member-role-form {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0;
-  min-width: 0;
-}
-
-.chat-member-role-form[hidden] {
-  display: none;
-}
-
-.chat-member-actions {
-  display: none;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
-}
-
-.chat-shell--can-manage-member-permissions .chat-member-actions {
-  display: inline-flex;
-}
-
-.chat-member-manage-toggle {
-  appearance: none;
-  border: 1px solid #d2deed;
-  border-radius: 8px;
-  width: 32px;
-  height: 32px;
-  background: #ffffff;
-  color: #32537f;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
-}
-
-.chat-member-manage-toggle:hover,
-.chat-member-manage-toggle:focus-visible,
-.chat-member-manage-toggle[aria-expanded="true"] {
-  border-color: #9bb9df;
-  background: #edf4ff;
-}
-
-.chat-member-manage-toggle:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chat-members-content,
-  .chat-members-panel[open] > .chat-members-content,
-  .chat-members-summary::after {
-    transition: none;
-  }
-}
-
-.chat-member-role-select {
-  min-height: 32px;
-  border: 1px solid var(--chat-border);
-  border-radius: 8px;
-  background: #ffffff;
-  color: #1b324f;
-  padding: 5px 8px;
-  font: inherit;
-  font-size: 12px;
-}
-
-.chat-member-role-submit.chat-btn--small {
-  min-height: 32px;
-}
-
-.chat-hint {
-  margin: 0;
-  color: var(--chat-muted);
-  font-size: 14px;
-}
-
-.chat-window {
-  --chat-window-padding: 14px;
-  --chat-signal-offset: 0px;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--chat-border);
-  border-radius: 18px;
-  padding: var(--chat-window-padding);
-  background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 24px rgba(23, 46, 77, 0.08);
-}
-
-.chat-window::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 58px;
-  pointer-events: none;
-  background: linear-gradient(180deg, rgba(251, 253, 255, 0.96) 0%, rgba(251, 253, 255, 0) 100%);
-  z-index: 1;
-}
-
-.chat-messages {
-  position: relative;
-  z-index: 2;
-}
-
-.chat-messages {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 220px;
-  max-height: min(58vh, 540px);
-  overflow-y: auto;
-  padding: 6px 2px calc(4px + var(--chat-signal-offset));
-  box-sizing: border-box;
-  transition: padding-bottom 180ms ease;
-}
-
-.chat-bubble {
-  min-width: 0;
-  max-width: min(78%, 680px);
-  background: var(--chat-bubble-bg, #ffffff);
-  border-radius: 16px 16px 16px 8px;
-  padding: 12px 14px 10px;
-  border: 1px solid var(--chat-bubble-border, #d4deea);
-  box-shadow: 0 8px 18px rgba(18, 38, 63, 0.08);
-}
-
-.chat-bubble--own {
-  margin-left: auto;
-  background: var(--chat-bubble-bg, #e4f1ff);
-  border-color: var(--chat-bubble-border, #9bc9ff);
-  border-radius: 16px 16px 8px 16px;
-}
-
-.chat-system-message {
-  align-self: center;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  max-width: min(92%, 720px);
-  padding: 4px 10px;
-  border-radius: 999px;
-  border: 1px solid #d6e0ec;
-  background: rgba(244, 248, 253, 0.9);
-  color: #60758d;
-  font-size: 12px;
-  line-height: 1.3;
-}
-
-.chat-system-message__body {
-  margin: 0;
-}
-
-.chat-system-message__timestamp {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.chat-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  font-size: 12px;
-  color: var(--chat-muted);
-  margin-bottom: 6px;
-  min-width: 0;
-}
-
-.chat-meta__author {
-  color: #1b324f;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.chat-meta__role {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid #a8bad0;
-  border-radius: 999px;
-  padding: 1px 7px;
-  font-size: 10px;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  background: #f4f8fd;
-}
-
-.chat-meta__source {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid #c6d5e7;
-  border-radius: 999px;
-  padding: 1px 7px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  background: #edf3fb;
-  color: #35506f;
-}
-
-.chat-meta__timestamp {
-  margin-left: auto;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.chat-meta__edited {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 6px;
-  border-radius: 999px;
-  border: 1px solid #d6e0ec;
-  background: #f4f8fd;
-  color: #60758d;
-  font-size: 11px;
-  text-transform: lowercase;
-}
-
-.chat-body {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.45;
-  color: #12263f;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-
-.chat-body p {
-  margin: 0 0 8px;
-}
-
-.chat-body p:last-child {
-  margin-bottom: 0;
-}
-
-.chat-body pre {
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.chat-body img,
-.chat-body video,
-.chat-body table {
-  max-width: 100%;
-  height: auto;
-}
-
-.chat-body table {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-}
-
-.chat-mention {
-  color: var(--chat-primary);
-  font-weight: 700;
-}
-
-.chat-mention--targeted {
-  background: var(--chat-mention-mark-background);
-  border-radius: 4px;
-  padding: 0 3px;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.chat-message-actions {
-  margin-top: 8px;
-  display: flex;
-  justify-content: flex-end;
-  opacity: 0;
-  transform: translateY(2px);
-  transition: opacity 150ms ease, transform 150ms ease;
-  pointer-events: none;
-}
-
-.chat-bubble:hover .chat-message-actions,
-.chat-bubble:focus-within .chat-message-actions,
-.chat-bubble--editing .chat-message-actions {
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.chat-message-action {
-  font-size: 11px;
-  line-height: 1.2;
-  border: 1px solid #c9d6e6;
-  background: #f5f9ff;
-  border-radius: 999px;
-  padding: 3px 9px;
-  margin: 0;
-  color: var(--chat-primary-dark);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.chat-message-action:hover {
-  background: #e6f0ff;
-}
-
-.chat-message-edit {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px dashed #c5d3e3;
-}
-
-.chat-inline-edit-form {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.chat-inline-edit-field {
-  position: relative;
-}
-
-.chat-inline-edit-form textarea {
-  width: 100%;
-  min-height: 96px;
-  resize: vertical;
-}
-
-.chat-inline-edit-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.chat-inline-edit-error {
-  margin: 0 0 8px;
-  color: var(--chat-danger);
-  font-size: 12px;
-}
-
-.chat-signal-entry {
-  font-size: 12px;
-  color: var(--chat-muted);
-}
-
-.chat-signals {
-  position: absolute;
-  left: var(--chat-window-padding);
-  right: var(--chat-window-padding);
-  bottom: var(--chat-window-padding);
-  z-index: 3;
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-  transform: translateY(6px);
-  transition: max-height 180ms ease, opacity 180ms ease, transform 180ms ease;
-}
-
-.chat-signals--active {
-  max-height: 120px;
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.chat-typing-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  font-size: 12px;
-  color: var(--chat-muted);
-  background: #edf3fb;
-  border: 1px solid #d2deed;
-  border-radius: 999px;
-  padding: 6px 12px;
-  overflow: hidden;
-  max-height: 34px;
-  opacity: 1;
-  transform: translateY(0);
-  transition: max-height 180ms ease, opacity 180ms ease, transform 180ms ease, padding 180ms ease;
-}
-
-.chat-typing-indicator--leaving {
-  max-height: 0;
-  opacity: 0;
-  padding: 0;
-  transform: translateY(-4px);
-}
-
-.chat-dots {
-  display: inline-flex;
-  gap: 3px;
-}
-
-.chat-signal-text {
-  display: inline-block;
-  max-width: 320px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chat-signal-text--sheen {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  color: #4b6683;
-  font-weight: 600;
-}
-
-.chat-signal-text--sheen::before,
-.chat-signal-text--sheen::after {
-  color: #5f738a;
-  font-weight: 600;
-}
-
-.chat-signal-text--sheen::before {
-  content: "[";
-}
-
-.chat-signal-text--sheen::after {
-  content: "]";
-}
-
-.chat-signal-text-sheen {
-  display: inline-block;
-  max-width: 100%;
-  padding: 1px 2px;
-  border-radius: 4px;
-  background: linear-gradient(
-    100deg,
-    rgba(181, 204, 230, 0.28) 0%,
-    rgba(232, 243, 255, 0.75) 45%,
-    rgba(181, 204, 230, 0.28) 100%
-  );
-  background-size: 220% 100%;
-  animation: chat-signal-sheen 2.4s linear infinite;
-}
-
-@keyframes chat-signal-sheen {
-  0% {
-    background-position: 210% 0;
-  }
-  100% {
-    background-position: -10% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chat-signal-text-sheen {
-    animation: none;
-  }
-}
-
-.chat-dots i {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: var(--chat-muted);
-  animation: chat-bounce 1.1s infinite ease-in-out;
-}
-
-.chat-dots i:nth-child(2) {
-  animation-delay: 0.15s;
-}
-
-.chat-dots i:nth-child(3) {
-  animation-delay: 0.3s;
-}
-
-@keyframes chat-bounce {
-  0%,
-  80%,
-  100% {
-    transform: translateY(0);
-    opacity: 0.45;
-  }
-  40% {
-    transform: translateY(-4px);
-    opacity: 1;
-  }
-}
-
-.chat-composer {
-  margin-top: 14px;
-  position: relative;
-}
-
-.chat-form {
-  display: flex;
-  gap: 9px;
-}
-
-.chat-form textarea,
-.chat-form select,
-.chat-form input[type="search"],
-.chat-field input,
-.chat-inline-edit-form textarea {
-  width: 100%;
-  border: 1px solid var(--chat-border);
-  border-radius: 12px;
-  padding: 10px 12px;
-  font: inherit;
-  color: var(--chat-text);
-  background: #ffffff;
-  box-sizing: border-box;
-}
-
-.chat-form textarea:focus,
-.chat-form select:focus,
-.chat-form input[type="search"]:focus,
-.chat-field input:focus,
-.chat-inline-edit-form textarea:focus {
-  border-color: #87b6f7;
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(31, 110, 220, 0.16);
-}
-
-.chat-composer .chat-form {
-  align-items: stretch;
-  gap: 0;
-}
-
-.chat-composer-shell {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: flex-end;
-  gap: 10px;
-  border: 1px solid #c8d8ea;
-  border-radius: 28px;
-  background: #ffffff;
-  padding: 8px 10px;
-  box-shadow: 0 10px 26px rgba(20, 52, 92, 0.1);
-  transition: border-color 120ms ease, box-shadow 120ms ease;
-}
-
-.chat-composer-shell:focus-within {
-  border-color: #7daee7;
-  box-shadow: 0 0 0 3px rgba(31, 110, 220, 0.12), 0 10px 26px rgba(20, 52, 92, 0.12);
-}
-
-.chat-composer .chat-composer-input {
-  flex: 1 1 auto;
-  min-width: 0;
-  width: 100%;
-  min-height: 24px;
-  max-height: 210px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  resize: none;
-  padding: 6px 2px;
-  margin: 0;
-  background: transparent;
-  overflow-y: hidden;
-  line-height: 1.35;
-}
-
-.chat-composer-shell--no-leading-tool .chat-composer-input {
-  padding-left: 10px;
-  padding-top: 5px;
-  padding-bottom: 7px;
-}
-
-.chat-composer .chat-composer-input:focus {
-  border: none;
-  outline: none;
-  box-shadow: none;
-}
-
-.chat-composer-tool {
-  appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 38px;
-  height: 38px;
-  border-radius: 999px;
-  border: 1px solid #d2deed;
-  background: #ffffff;
-  color: #254569;
-  font: inherit;
-  font-size: 34px;
-  line-height: 1;
-  padding: 0;
-  cursor: pointer;
-}
-
-.chat-composer-tool:hover {
-  background: #f3f8ff;
-  border-color: #b8cae1;
-}
-
-.chat-composer-tool:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(31, 110, 220, 0.18);
-}
-
-.chat-composer-tool:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
-}
-
-.chat-composer-tool:disabled:hover {
-  background: #ffffff;
-  border-color: #d2deed;
-}
-
-.chat-composer-tool--add {
-  transform: translateY(1px);
-}
-
-.chat-composer-tool--voice {
-  font-size: 0;
-}
-
-.chat-composer-mic {
-  position: relative;
-  width: 11px;
-  height: 14px;
-  border: 2px solid currentColor;
-  border-radius: 999px;
-  box-sizing: border-box;
-}
-
-.chat-composer-mic::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -6px;
-  width: 2px;
-  height: 4px;
-  background: currentColor;
-}
-
-.chat-composer-mic::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -8px;
-  width: 10px;
-  height: 5px;
-  border: 2px solid currentColor;
-  border-top: none;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  box-sizing: border-box;
-}
-
-.chat-composer-submit {
-  min-width: 38px;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-  border-radius: 999px;
-}
-
-.chat-composer-send-icon {
-  width: 18px;
-  height: 18px;
-  display: block;
-}
-
-.chat-composer-send-icon path {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.chat-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.chat-form--invite {
-  align-items: center;
-  width: 100%;
-  gap: 10px;
-  flex-wrap: nowrap;
-}
-
-.chat-form--invite .chat-btn--small {
-  align-self: center;
-  min-height: 42px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.chat-invite-picker {
-  flex: 1 1 auto;
-  min-width: 0;
-  position: relative;
-}
-
-.chat-invite-search {
-  width: 100%;
-}
-
-.chat-invite-menu {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(100% + 8px);
-  z-index: 8;
-  border: 1px solid var(--chat-border);
-  border-radius: 12px;
-  background: #ffffff;
-  box-shadow: 0 12px 26px rgba(31, 35, 40, 0.15);
-  overflow: hidden;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.chat-invite-item {
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: #ffffff;
-  color: #233a55;
-  cursor: pointer;
-  display: block;
-  padding: 10px 12px;
-  font: inherit;
-}
-
-.chat-invite-item:hover,
-.chat-invite-item--active {
-  background: #edf4ff;
-}
-
-.chat-hint--invite-search {
-  margin-top: 6px;
-  font-size: 12px;
-}
-
-.chat-members-invite .chat-form--invite {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  margin: 0;
-}
-
-.chat-members-invite:focus-within {
-  border-color: #7daee7;
-  box-shadow: 0 0 0 3px rgba(31, 110, 220, 0.12);
-}
-
-.chat-members-invite .chat-invite-picker {
-  display: flex;
-  align-items: center;
-  min-height: 34px;
-}
-
-.chat-members-invite .chat-form input.chat-invite-search[type="search"] {
-  border: none;
-  border-radius: 0;
-  height: 34px;
-  min-height: 34px;
-  padding: 0;
-  box-sizing: border-box;
-  display: block;
-  line-height: 34px;
-  font-weight: 700;
-  background: transparent;
-  box-shadow: none;
-}
-
-.chat-members-invite .chat-form input.chat-invite-search[type="search"]::placeholder {
-  color: var(--chat-muted);
-  font-weight: 500;
-}
-
-.chat-members-invite .chat-form input.chat-invite-search[type="search"]:focus {
-  border: none;
-  outline: none;
-  box-shadow: none;
-}
-
-.chat-members-invite .chat-btn {
-  box-shadow: none;
-}
-
-.chat-members-invite .chat-btn--small {
-  height: 34px;
-  min-height: 34px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.chat-members-invite .chat-btn:hover,
-.chat-members-invite .chat-btn:focus-visible {
-  transform: none;
-  box-shadow: none;
-}
-
-.chat-form--hidden {
-  display: none;
-}
-
-.chat-mentions-menu {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: calc(100% + 8px);
-  z-index: 6;
-  border: 1px solid var(--chat-border);
-  border-radius: 12px;
-  background: #ffffff;
-  box-shadow: 0 12px 26px rgba(31, 35, 40, 0.15);
-  overflow: hidden;
-}
-
-.chat-mentions-menu--inline-edit {
-  z-index: 5;
-}
-
-.chat-mentions-item {
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: #ffffff;
-  color: #233a55;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 11px;
-}
-
-.chat-mentions-item:hover,
-.chat-mentions-item--active {
-  background: #edf4ff;
-}
-
-.chat-mentions-item__token {
-  font-family: "IBM Plex Mono", "Fira Mono", "Menlo", monospace;
-  font-weight: 700;
-  color: var(--chat-primary-dark);
-}
-
-.chat-mentions-item__label {
-  color: var(--chat-muted);
-  font-size: 12px;
-}
-
-.chat-btn {
-  appearance: none;
-  border: 1px solid transparent;
-  border-radius: 12px;
-  padding: 9px 16px;
-  background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-primary-dark) 100%);
-  color: #ffffff;
-  font: inherit;
-  font-weight: 700;
-  line-height: 1.2;
-  text-decoration: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
-  box-shadow: 0 8px 16px rgba(20, 82, 172, 0.3);
-}
-
-.chat-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 10px 18px rgba(20, 82, 172, 0.34);
-}
-
-.chat-btn:active {
-  transform: translateY(0);
-}
-
-.chat-btn:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(31, 110, 220, 0.23), 0 8px 16px rgba(20, 82, 172, 0.3);
-}
-
-.chat-btn:disabled {
-  opacity: 0.56;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.chat-btn--small {
-  border-radius: 10px;
-  padding: 7px 11px;
-  font-size: 13px;
-}
-
-.chat-btn--ghost {
-  background: #ffffff;
-  border-color: var(--chat-border);
-  color: var(--chat-text);
-  box-shadow: none;
-}
-
-.chat-btn--ghost:hover {
-  background: #f5f8fc;
-  border-color: #b7c8dd;
-  box-shadow: none;
-}
-
-.chat-btn--danger {
-  background: var(--chat-danger-soft);
-  border-color: #f0bcc3;
-  color: var(--chat-danger);
-  box-shadow: none;
-}
-
-.chat-btn--danger:hover {
-  background: #ffe6ea;
-  border-color: #e7a4ad;
-  color: #9f1d12;
-  box-shadow: none;
-}
-
-.chat-btn--success {
-  background: var(--chat-success-soft);
-  border-color: #a8dfbc;
-  color: var(--chat-success);
-  box-shadow: none;
-}
-
-.chat-btn--success:hover {
-  background: #ddf9e7;
-  border-color: #8fd2a8;
-  color: #1a6535;
-  box-shadow: none;
-}
-
-.chat-btn--send {
-  min-width: 38px;
-  min-height: 38px;
-  padding: 0;
-  border-radius: 999px;
-  box-shadow: 0 6px 16px rgba(20, 82, 172, 0.26);
-}
-
-.chat-banner {
-  margin: 14px 0 0;
-  padding: 11px 12px;
-  border-radius: 12px;
-  font-size: 14px;
-}
-
-.chat-banner--muted {
-  color: #7b5a00;
-  border: 1px solid #efd08f;
-  background: #fff8e6;
-}
-
-.chat-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.chat-invitations {
-  margin: 0 0 16px;
-}
-
-.chat-invitations h2,
-.chat-joined h2 {
-  margin: 0 0 9px;
-  font-size: 16px;
-}
-
-.chat-list-item--invitation {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 11px 13px;
-  border: 1px solid var(--chat-border);
-  border-radius: 12px;
-  margin-bottom: 8px;
-  background: #ffffff;
-}
-
-.chat-list-item--chat {
-  margin-bottom: 8px;
-}
-
-.chat-list-title {
-  font-weight: 700;
-}
-
-.chat-list-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.chat-list-link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 11px 13px;
-  border: 1px solid var(--chat-border);
-  border-radius: 12px;
-  text-decoration: none;
-  color: var(--chat-text);
-  background: #ffffff;
-  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
-}
-
-.chat-list-meta {
-  color: var(--chat-muted);
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-.chat-list-link:hover {
-  border-color: #a8bfdc;
-  box-shadow: 0 8px 18px rgba(22, 55, 95, 0.08);
-  transform: translateY(-1px);
-}
-
-@media (max-width: 900px) {
-  .chat-shell {
-    width: min(1080px, calc(100% - 16px));
-    margin: 12px auto 22px;
-    border-radius: 18px;
-  }
-
-  .chat-shell--style-unbounded {
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-  }
-
-  .chat-header {
-    flex-direction: column;
-  }
-
-  .chat-header-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .chat-messages {
-    min-height: 190px;
-  }
-
-  .chat-bubble {
-    max-width: 90%;
-  }
-}
-
-@media (max-width: 640px) {
-  .chat-shell {
-    padding: 14px;
-  }
-
-  .chat-shell--style-unbounded {
-    --chat-unbounded-side-padding: 10px;
-    --chat-floating-composer-clearance: clamp(74px, 10vh, 108px);
-    padding-top: 12px;
-    padding-right: var(--chat-unbounded-inline-end);
-    padding-bottom: calc(8px + env(safe-area-inset-bottom));
-    padding-left: var(--chat-unbounded-inline-start);
-    height: 100vh;
-    height: 100svh;
-    height: 100dvh;
-    max-height: 100vh;
-    max-height: 100svh;
-    max-height: 100dvh;
-    overflow: hidden;
-  }
-
-  .chat-members-list-shell {
-    max-height: 188px;
-  }
-
-  .chat-shell--can-manage-member-permissions .chat-members-item {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .chat-shell--can-manage-member-permissions .chat-member-actions {
-    width: 100%;
-  }
-
-  .chat-shell--can-manage-member-permissions .chat-member-role-form {
-    width: 100%;
-  }
-
-  .chat-shell--can-manage-member-permissions .chat-member-role-select {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .chat-window {
-    --chat-window-padding: 11px;
-    padding: var(--chat-window-padding);
-  }
-
-  .chat-shell--style-unbounded .chat-window {
-    --chat-window-padding: 0px;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    min-height: 0;
-  }
-
-  .chat-shell--style-unbounded .chat-messages {
-    min-height: 0;
-    max-height: calc(100dvh - var(--chat-floating-composer-clearance));
-  }
-
-  .chat-bubble {
-    max-width: 100%;
-  }
-
-  .chat-meta__timestamp {
-    margin-left: 0;
-    width: 100%;
-  }
-
-  .chat-composer-shell {
-    border-radius: 22px;
-    gap: 8px;
-    padding: 7px 8px;
-  }
-
-  .chat-shell--style-unbounded .chat-composer {
-    bottom: max(8px, env(safe-area-inset-bottom), env(keyboard-inset-bottom, 0px));
-  }
-
-  .chat-shell--style-unbounded .chat-composer-shell {
-    border-radius: 18px;
-  }
-
-  .chat-composer .chat-composer-input {
-    min-height: 22px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-  }
-
-  .chat-composer-tool {
-    width: 34px;
-    height: 34px;
-    font-size: 30px;
-  }
-
-  .chat-composer-mic {
-    width: 10px;
-    height: 13px;
-  }
-
-  .chat-composer-submit {
-    min-width: 34px;
-    width: 34px;
-    height: 34px;
-  }
-
-  .chat-composer-send-icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  .chat-list-item--invitation {
-    flex-wrap: wrap;
-  }
-
-  .chat-inline-edit-actions {
-    justify-content: stretch;
-  }
-
-  .chat-inline-edit-actions .chat-btn {
-    flex: 1 1 0;
-  }
-}
+/*
+ *= require turbo_chat/base
+ *= require turbo_chat/layout
+ *= require turbo_chat/members
+ *= require turbo_chat/messages
+ *= require turbo_chat/composer
+ *= require turbo_chat/menus
+ *= require turbo_chat/components
+ */