@anakin824/prdg-chat-ui 0.1.0

package/dist/index.css

@@ -0,0 +1,1346 @@
+@charset "UTF-8";
+
+/* src/chat/styles/variables.css */
+[data-chat-root] {
+  --chat-primary: #0a84ff;
+  --chat-bubble-sent: #0a84ff;
+  --chat-bubble-received: #2c2c2e;
+  --chat-text-on-sent: #ffffff;
+  --chat-text-on-received: #f5f5f7;
+  --chat-radius: 18px;
+  --chat-font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --chat-surface: #1c1c1e;
+  --chat-border: #3a3a3c;
+  --chat-muted-fill: rgba(0, 0, 0, 0.2);
+  --chat-composer-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
+  font-family: var(--chat-font-family);
+  color: var(--chat-text-on-received);
+}
+
+/* scss-module:G:prdg-chatwebsrcchatcomponentschat.module.css\#scss-module-data */
+.chat__list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 8px;
+  background: var(--chat-surface);
+  border-radius: var(--chat-radius);
+  border: 1px solid var(--chat-border);
+}
+.chat__row {
+  padding: 10px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: left;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+}
+.chat__row:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.chat__rowActive {
+  background: rgba(10, 132, 255, 0.2);
+}
+.chat__thread {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  max-height: 320px;
+  overflow-y: auto;
+  overflow-anchor: none;
+  background: var(--chat-surface);
+  border-radius: var(--chat-radius);
+  border: 1px solid var(--chat-border);
+}
+.chat__threadFlex {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 16px;
+  overflow-y: auto;
+  overflow-anchor: none;
+  flex: 1;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+.chat__bubbleRow {
+  display: flex;
+  width: 100%;
+}
+.chat__bubbleRowOwn {
+  justify-content: flex-end;
+}
+.chat__bubbleRowOther {
+  justify-content: flex-start;
+}
+.chat__bubble {
+  max-width: min(72%, 420px);
+  padding: 6px 10px;
+  border-radius: var(--chat-radius);
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.4;
+}
+.chat__bubbleOwn {
+  background: var(--chat-bubble-sent);
+  color: var(--chat-text-on-sent);
+  border-bottom-right-radius: 3px;
+}
+.chat__bubbleOther {
+  background: var(--chat-bubble-received);
+  color: var(--chat-text-on-received);
+  border-bottom-left-radius: 3px;
+}
+.chat__meta {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  opacity: 0.62;
+  margin-top: 3px;
+}
+.chat__bubbleRowCompact {
+  margin-top: -4px;
+}
+.chat__olderSentinel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 28px;
+  flex-shrink: 0;
+}
+.chat__olderHint {
+  width: 32px;
+  height: 2px;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.1);
+}
+.chat__olderSpinner {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  padding: 4px 0;
+}
+.chat__olderDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.45;
+  animation: chat__chatBounce 1.2s infinite;
+}
+.chat__olderDot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.chat__olderDot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+.chat__bubbleRowAnimateIn {
+  animation: chat__msgFadeSlideIn 0.18s ease-out both;
+}
+@keyframes chat__msgFadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.chat__bubbleFailed {
+  opacity: 0.75;
+  outline: 1px solid rgba(239, 68, 68, 0.45);
+}
+.chat__statusSending {
+  display: inline-flex;
+  align-items: center;
+}
+.chat__statusSpinner {
+  animation: chat__chatSpin 1.2s linear infinite;
+}
+@keyframes chat__chatSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.chat__statusFailed {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ef4444;
+  color: #fff;
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1;
+  opacity: 1;
+  cursor: default;
+}
+.chat__inputRow {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  margin-top: 8px;
+}
+.chat__composer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 4px 4px 4px;
+  background: var(--chat-surface);
+  border: 1px solid var(--chat-border);
+  border-radius: 10px;
+  box-shadow: var(--chat-composer-shadow, 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05));
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.chat__composer:focus-within {
+  border-color: color-mix(in srgb, var(--chat-primary) 55%, var(--chat-border));
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04),
+    0 2px 8px rgba(15, 23, 42, 0.05),
+    0 0 0 2px color-mix(in srgb, var(--chat-primary) 15%, transparent);
+}
+.chat__toolBtn {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--chat-text-on-received);
+  opacity: 0.55;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    opacity 0.12s ease,
+    background 0.12s ease,
+    transform 0.1s ease;
+}
+.chat__toolBtn:hover {
+  opacity: 0.85;
+  background: var(--chat-muted-fill);
+}
+.chat__toolBtn:active {
+  transform: scale(0.93);
+}
+.chat__toolBtnRecording {
+  opacity: 1;
+  color: #dc2626;
+  background: color-mix(in srgb, #dc2626 12%, transparent);
+}
+.chat__toolBtnRecording:hover {
+  background: color-mix(in srgb, #dc2626 20%, transparent);
+}
+.chat__composerDivider {
+  width: 1px;
+  align-self: center;
+  min-height: 18px;
+  max-height: 28px;
+  background: var(--chat-border);
+  flex-shrink: 0;
+  margin: 0 2px;
+  opacity: 0.6;
+}
+.chat__textareaGrow {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  max-height: min(300px, 42vh);
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.chat__textareaMirror,
+.chat__textarea {
+  grid-area: 1/1;
+  padding: 8px 6px;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  white-space: pre-wrap;
+  word-break: break-word;
+  box-sizing: border-box;
+  min-height: 37px;
+}
+.chat__textareaMirror {
+  visibility: hidden;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.chat__textarea {
+  resize: none;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  overflow: hidden;
+  width: 100%;
+}
+.chat__textarea::-moz-placeholder {
+  color: color-mix(in srgb, var(--chat-text-on-received) 40%, transparent);
+}
+.chat__textarea::placeholder {
+  color: color-mix(in srgb, var(--chat-text-on-received) 40%, transparent);
+}
+.chat__textarea:focus {
+  outline: none;
+}
+.chat__sendBtn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 8px;
+  border: none;
+  background: var(--chat-primary);
+  color: var(--chat-text-on-sent);
+  font-size: 0;
+  cursor: pointer;
+  transition:
+    filter 0.13s ease,
+    transform 0.1s ease,
+    opacity 0.13s ease;
+}
+.chat__sendBtn:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+.chat__sendBtn:active:not(:disabled) {
+  transform: scale(0.96);
+}
+.chat__sendBtn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  filter: none;
+}
+.chat__sendBtnIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat__iconBtn {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--chat-border);
+  background: var(--chat-muted-fill);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat__mediaThumb {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+  cursor: pointer;
+}
+.chat__imageWrap {
+  position: relative;
+  display: block;
+  width: 220px;
+  height: 160px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  line-height: 0;
+  background: color-mix(in srgb, var(--chat-muted-fill) 90%, var(--chat-border));
+}
+.chat__imageBtn {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.chat__imageSkeletonFill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--chat-text-on-received) 6%, transparent) 25%,
+      color-mix(in srgb, var(--chat-text-on-received) 12%, transparent) 50%,
+      color-mix(in srgb, var(--chat-text-on-received) 6%, transparent) 75%);
+  background-size: 200% 100%;
+  animation: chat__skeletonShimmer 1.4s ease-in-out infinite;
+}
+.chat__imageSkeletonOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--chat-text-on-received) 6%, transparent) 25%,
+      color-mix(in srgb, var(--chat-text-on-received) 12%, transparent) 50%,
+      color-mix(in srgb, var(--chat-text-on-received) 6%, transparent) 75%);
+  background-size: 200% 100%;
+  animation: chat__skeletonShimmer 1.4s ease-in-out infinite;
+}
+@keyframes chat__skeletonShimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.chat__videoWrap {
+  position: relative;
+  width: 220px;
+  height: 160px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #0a0a0a;
+}
+.chat__videoPoster {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+.chat__videoWrap video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -o-object-fit: contain;
+     object-fit: contain;
+  background: #000;
+}
+.chat__playOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  font-size: 32px;
+}
+.chat__voiceWrap {
+  min-width: 200px;
+  max-width: 260px;
+}
+.chat__voiceBar {
+  height: 40px;
+  margin-top: 4px;
+}
+.chat__fileChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 13px;
+}
+.chat__widgetFab {
+  position: fixed;
+  z-index: 9999;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: var(--chat-primary);
+  color: var(--chat-text-on-sent);
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+}
+.chat__fabBr {
+  bottom: 24px;
+  right: 24px;
+  left: auto;
+  top: auto;
+}
+.chat__fabBl {
+  bottom: 24px;
+  left: 24px;
+  right: auto;
+  top: auto;
+}
+.chat__widgetPanel {
+  position: fixed;
+  z-index: 9998;
+  width: 380px;
+  max-width: calc(100vw - 24px);
+  height: 520px;
+  max-height: calc(100vh - 100px);
+  display: flex;
+  flex-direction: column;
+  background: var(--chat-surface);
+  border-radius: 16px;
+  border: 1px solid var(--chat-border);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+.chat__panelBr {
+  bottom: 96px;
+  right: 24px;
+  left: auto;
+  top: auto;
+}
+.chat__panelBl {
+  bottom: 96px;
+  left: 24px;
+  right: auto;
+  top: auto;
+}
+.chat__widgetHeader {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--chat-border);
+  font-weight: 600;
+}
+.chat__widgetBody {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.chat__chatPanelInner {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.chat__panelToolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 0 8px;
+  flex-shrink: 0;
+}
+.chat__refreshBtn {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--chat-border);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.chat__refreshBtn:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.chat__chatPanelThread {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.chat__typing {
+  font-size: 12px;
+  opacity: 0.7;
+  padding: 4px 8px;
+}
+.chat__typingIndicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  opacity: 0.72;
+  padding: 2px 8px 4px;
+  min-height: 18px;
+}
+.chat__typingDots {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+}
+.chat__typingDots span {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: chat__chatBounce 1.2s infinite;
+}
+.chat__typingDots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.chat__typingDots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes chat__chatBounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+.chat__bubbleDeleted {
+  background: rgba(255, 255, 255, 0.06);
+  color: inherit;
+  opacity: 0.55;
+  border-bottom-right-radius: 4px;
+}
+.chat__editedLabel {
+  opacity: 0.6;
+}
+.chat__modalBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.chat__modalCard {
+  width: 100%;
+  max-width: 420px;
+  max-height: min(560px, 92vh);
+  display: flex;
+  flex-direction: column;
+  background: var(--chat-surface);
+  border: 1px solid var(--chat-border);
+  border-radius: 12px;
+  box-shadow:
+    0 0 0 1px rgba(15, 23, 42, 0.04),
+    0 12px 40px rgba(15, 23, 42, 0.12),
+    0 24px 64px rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+}
+.chat__modalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 18px 14px;
+  border-bottom: 1px solid var(--chat-border);
+}
+.chat__modalTitle {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: inherit;
+}
+.chat__modalClose {
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--chat-text-on-received) 55%, transparent);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.chat__modalClose:hover {
+  background: color-mix(in srgb, var(--chat-text-on-received) 8%, transparent);
+  color: var(--chat-text-on-received);
+}
+.chat__modalBody {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  padding: 0 16px 16px;
+  box-sizing: border-box;
+}
+.chat__modalPanel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+}
+.chat__segmentWrap {
+  display: flex;
+  gap: 0;
+  margin: 14px 0 0;
+  padding: 3px;
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--chat-text-on-received) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--chat-border) 80%, transparent);
+  width: 100%;
+  box-sizing: border-box;
+}
+.chat__segment,
+.chat__segmentActive {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--chat-text-on-received) 72%, transparent);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.chat__segment:hover {
+  color: var(--chat-text-on-received);
+}
+.chat__segmentActive {
+  background: var(--chat-surface);
+  color: var(--chat-text-on-received);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+.chat__modalLabel {
+  display: block;
+  margin: 14px 0 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--chat-text-on-received) 52%, transparent);
+}
+.chat__modalSearch {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 6px 0 0;
+  padding: 8px 12px;
+  min-height: 38px;
+  line-height: 1.4;
+  border-radius: 8px;
+  border: 1px solid var(--chat-border);
+  background: var(--chat-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+}
+.chat__modalSearch::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.chat__modalSearch::-moz-placeholder {
+  color: color-mix(in srgb, var(--chat-text-on-received) 42%, transparent);
+}
+.chat__modalSearch::placeholder {
+  color: color-mix(in srgb, var(--chat-text-on-received) 42%, transparent);
+}
+.chat__modalSearch:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--chat-primary) 55%, var(--chat-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-primary) 18%, transparent);
+}
+.chat__modalList {
+  flex: 1;
+  min-height: 180px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 8px 10px 10px;
+  margin: 8px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--chat-border) 85%, transparent);
+  background: color-mix(in srgb, var(--chat-muted-fill) 35%, transparent);
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+.chat__modalList::-webkit-scrollbar {
+  width: 8px;
+}
+.chat__modalList::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--chat-text-on-received) 22%, transparent);
+}
+.chat__modalList::-webkit-scrollbar-track {
+  background: transparent;
+}
+.chat__modalRow {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 2px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.chat__modalRowHoriz {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px;
+}
+.chat__modalRowHoriz:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--chat-primary) 8%, transparent);
+}
+.chat__modalRowHorizSelected {
+  background: color-mix(in srgb, var(--chat-primary) 10%, transparent);
+}
+.chat__modalRow:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.chat__modalRowInner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+.chat__modalAvatar {
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: color-mix(in srgb, var(--chat-primary) 16%, var(--chat-muted-fill));
+  color: color-mix(in srgb, var(--chat-primary) 95%, var(--chat-text-on-received));
+  border: 1px solid color-mix(in srgb, var(--chat-primary) 22%, transparent);
+}
+.chat__modalCheckbox {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  border: 2px solid color-mix(in srgb, var(--chat-text-on-received) 28%, var(--chat-border));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.chat__modalCheckboxOn {
+  background: var(--chat-primary);
+  border-color: var(--chat-primary);
+  color: var(--chat-text-on-sent);
+}
+.chat__modalName {
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: -0.01em;
+}
+.chat__modalMeta {
+  font-size: 12px;
+  color: color-mix(in srgb, var(--chat-text-on-received) 58%, transparent);
+}
+.chat__modalEmpty {
+  padding: 28px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: color-mix(in srgb, var(--chat-text-on-received) 55%, transparent);
+}
+.chat__modalError {
+  margin: 10px 0 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(220, 38, 38, 0.09);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  font-size: 13px;
+  color: #b91c1c;
+  width: 100%;
+  box-sizing: border-box;
+}
+.chat__modalPrimary {
+  margin: 14px 0 0;
+  width: 100%;
+  align-self: stretch;
+  min-height: 44px;
+  padding: 0 18px;
+  border-radius: 8px;
+  border: none;
+  background: var(--chat-primary);
+  color: var(--chat-text-on-sent);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  transition: filter 0.15s ease, opacity 0.15s ease;
+}
+.chat__modalPrimary:hover:not(:disabled) {
+  filter: brightness(1.05);
+}
+.chat__modalPrimary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  filter: none;
+}
+.chat__chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 10px 0 0;
+}
+.chat__chip {
+  border: 1px solid var(--chat-border);
+  border-radius: 999px;
+  padding: 5px 12px 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--chat-muted-fill) 80%, transparent);
+  color: inherit;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.chat__chip:hover {
+  background: color-mix(in srgb, var(--chat-primary) 10%, var(--chat-muted-fill));
+  border-color: color-mix(in srgb, var(--chat-primary) 35%, var(--chat-border));
+}
+.chat__chipRemove {
+  margin-left: 4px;
+  opacity: 0.65;
+  font-size: 14px;
+  line-height: 1;
+}
+.chat__inputWrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.chat__mentionPopover {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 4px;
+  max-height: 180px;
+  overflow-y: auto;
+  z-index: 5;
+  background: var(--chat-surface);
+  border: 1px solid var(--chat-border);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+}
+.chat__mentionRow {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.chat__mentionRow:hover,
+.chat__mentionRowActive {
+  background: rgba(10, 132, 255, 0.2);
+}
+.chat__panelToolbarInner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+/* scss-module:G:prdg-chatwebsrcchatcomponentsstandalone-chat.module.css\#scss-module-data */
+.standalone-chat__root {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f4f4f5;
+  color: #111827;
+  box-sizing: border-box;
+}
+.standalone-chat__shell {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  background: #ffffff;
+  box-shadow: 0 0 0 1px #e5e7eb;
+}
+.standalone-chat__sidebar {
+  position: relative;
+  width: min(360px, 34vw);
+  min-width: 280px;
+  border-right: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: #fafafa;
+}
+.standalone-chat__sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 18px 12px;
+  gap: 12px;
+}
+.standalone-chat__sidebarTitle {
+  margin: 0;
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #111827;
+}
+.standalone-chat__iconSquare {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #6366f1;
+}
+.standalone-chat__searchWrap {
+  padding: 0 16px 12px;
+  position: relative;
+}
+.standalone-chat__searchInput {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 36px 10px 14px;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  font: inherit;
+  font-size: 14px;
+  color: #111827;
+}
+.standalone-chat__searchInput::-moz-placeholder {
+  color: #9ca3af;
+}
+.standalone-chat__searchInput::placeholder {
+  color: #9ca3af;
+}
+.standalone-chat__searchIcon {
+  position: absolute;
+  right: 28px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.45;
+  pointer-events: none;
+  font-size: 14px;
+}
+.standalone-chat__tabs {
+  display: flex;
+  gap: 4px;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.standalone-chat__tab {
+  flex: 1;
+  padding: 10px 8px;
+  border: none;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: #6b7280;
+  cursor: pointer;
+  border-radius: 8px 8px 0 0;
+  position: relative;
+}
+.standalone-chat__tabActive {
+  color: #7c3aed;
+}
+.standalone-chat__tabActive::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: -12px;
+  height: 2px;
+  background: #7c3aed;
+  border-radius: 2px;
+}
+.standalone-chat__listScroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px 80px;
+  min-height: 0;
+}
+.standalone-chat__sectionLabel {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #9ca3af;
+  padding: 12px 8px 8px;
+}
+.standalone-chat__convRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 2px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  box-sizing: border-box;
+}
+.standalone-chat__convRow:hover {
+  background: #f3f4f6;
+}
+.standalone-chat__convRowActive {
+  background: #ede9fe;
+  box-shadow: inset 0 0 0 1px #ddd6fe;
+}
+.standalone-chat__avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      145deg,
+      #ede9fe,
+      #ddd6fe);
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.standalone-chat__avatarInitials {
+  font-size: 12px;
+  font-weight: 700;
+  color: #6d28d9;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+.standalone-chat__avatarDot {
+  position: absolute;
+  bottom: 1px;
+  right: 1px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #22c55e;
+  border: 2px solid #fff;
+}
+.standalone-chat__convBody {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.standalone-chat__convTopLine {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 6px;
+  min-width: 0;
+}
+.standalone-chat__convName {
+  font-weight: 600;
+  font-size: 13.5px;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+.standalone-chat__convPreview {
+  font-size: 12px;
+  color: #6b7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+}
+.standalone-chat__convTime {
+  font-size: 11px;
+  color: #9ca3af;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.standalone-chat__fab {
+  position: absolute;
+  bottom: 18px;
+  right: 18px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  background: #0ea5e9;
+  color: #fff;
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.standalone-chat__sidebarFooter {
+  position: relative;
+  flex-shrink: 0;
+  min-height: 1px;
+}
+.standalone-chat__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: #fff;
+}
+.standalone-chat__mainHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  gap: 12px;
+  flex-shrink: 0;
+}
+.standalone-chat__mainHeaderLeft {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+.standalone-chat__mainAvatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      145deg,
+      #e5e7eb,
+      #d1d5db);
+  flex-shrink: 0;
+  position: relative;
+}
+.standalone-chat__mainTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.standalone-chat__mainStatus {
+  font-size: 12px;
+  color: #22c55e;
+  font-weight: 500;
+  margin-top: 2px;
+}
+.standalone-chat__mainActions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.standalone-chat__actionBtn {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+}
+.standalone-chat__actionBtn:hover {
+  background: #f9fafb;
+}
+.standalone-chat__threadArea {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background:
+    linear-gradient(
+      180deg,
+      #fafafa 0%,
+      #ffffff 40%);
+}
+.standalone-chat__emptyMain {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #9ca3af;
+  font-size: 15px;
+  padding: 32px;
+  text-align: center;
+}
+.standalone-chat__inputArea {
+  padding: 8px 14px 10px;
+  border-top: 1px solid #e5e7eb;
+  background: #fff;
+  flex-shrink: 0;
+}
+.standalone-chat__callsEmpty {
+  padding: 48px 24px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+/*# sourceMappingURL=index.css.map */