ttc-ai-client/dist/widget/styles.d.ts

TypeScript client sdk for TTC AI services with decorators and schema validation.

/**
 * TTC Chat Widget Styles
 * Exported as TypeScript string for proper bundling
 */
export declare const widgetStyles = "\n:root {\n  --ttc-primary: #565656ff;\n  --ttc-primary-hover: #2d2d2dff;\n  --ttc-bg: #f9fafb;\n  --ttc-messages-bg: #f9fafb;\n  --ttc-header-bg: #f9fafb;\n  --ttc-footer-bg: #ffffff;\n  --ttc-text: #1f2937;\n  --ttc-header-text: #1f2937;\n  --ttc-user-bubble: var(--ttc-primary);\n  --ttc-ai-bubble: #e5e7eb;\n  --ttc-user-bubble-text: #ffffff;\n  --ttc-ai-bubble-text: var(--ttc-text);\n  --ttc-status-text: #6b7280;\n  --ttc-border: #cdced1ff;\n  --ttc-scrollbar: #d1d5db;\n  --ttc-focus: var(--ttc-primary);\n  --ttc-radius: 14px;\n  --ttc-shadow: 0 8px 32px rgba(0,0,0,0.15);\n  --ttc-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;\n  --ttc-bot-border: var(--ttc-primary);\n  --ttc-bot-bg: #ffffff;\n  --ttc-bot-eye: var(--ttc-primary);\n  --ttc-bot-antenna: var(--ttc-primary);\n}\n\n/* TTC Animated Bot Widget */\n.ttc-bot-container {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 56px;\n  height: 56px;\n  z-index: 9999;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ttc-bot-container.ttc-bot-moved {\n  bottom: 20px;\n  right: 380px;\n  transform: translateX(-50%);\n}\n\n/* Floating Bot Button */\n.ttc-floating-bot {\n  width: 56px;\n  height: 56px;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  outline: none;\n  animation: ttc-bot-float 4s ease-in-out infinite;\n}\n\n.ttc-floating-bot:hover {\n  /* No hover effects for minimalist design */\n}\n\n.ttc-floating-bot:active {\n  /* No active effects for minimalist design */\n}\n\n.ttc-floating-bot:focus {\n  outline: none;\n}\n\n/* New SVG-based Bot Styles */\n.bot-container {\n  display: inline-block;\n  margin-top: calc(56px * 0.4);\n  transition: transform var(--transition-speed) ease;\n  transform: rotate(var(--bot-tilt, 0deg));\n}\n\n.bot-body {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform-origin: center center;\n  will-change: transform;\n}\n\n.bot-svg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n}\n\n/* Base styles for all SVG shapes */\n.shape-path {\n  transition: all var(--transition-speed) ease;\n}\n\n.antenna-path {\n  transition: fill var(--transition-speed) ease;\n  fill: var(--bot-border-color);\n}\n\n.eyes-container {\n  display: flex;\n  gap: 25%;\n  width: 50%;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  transform: translate(var(--bot-eye-x, 0px), var(--bot-eye-y, 0px));\n  transition: transform 0.05s ease-out;\n}\n\n.eye {\n  width: 40%;\n  padding-bottom: 40%;\n  height: 0;\n  background: var(--bot-eye-color);\n  border-radius: 50%;\n  transition: background-color var(--transition-speed) ease;\n}\n\n/* Hover effects */\n.bot-container:hover .shape-path {\n  stroke: var(--bot-primary-color);\n}\n\n.bot-container:hover .antenna-path {\n  fill: var(--bot-primary-color);\n}\n\n.bot-container:hover .eye {\n  background: var(--bot-primary-color);\n}\n\n/* Call Icon - Simplified and Clean */\n.ttc-call-icon {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  width: 14px;\n  height: 14px;\n  background: #ef4444;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transform: scale(0);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 1;\n  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);\n}\n\n.ttc-floating-bot.ttc-call-active .ttc-call-icon {\n  opacity: 1;\n  transform: scale(1);\n  animation: ttc-call-glow 2s ease-in-out infinite;\n}\n\n/* Remove complex pseudo-elements, just a simple inner dot */\n.ttc-call-icon::before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  background: white;\n  border-radius: 50%;\n  position: relative;\n}\n\n/* Call Background Effects - Simplified */\n.ttc-call-background {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 72px;\n  height: 72px;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n}\n\n.ttc-floating-bot.ttc-call-active .ttc-call-background {\n  opacity: 1;\n}\n\n.ttc-call-circle {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 1.5px solid rgba(239, 68, 68, 0.3);\n  border-radius: 50%;\n  animation: ttc-call-ripple 2s ease-out infinite;\n}\n\n.ttc-call-circle:nth-child(1) {\n  width: 56px;\n  height: 56px;\n  animation-delay: 0s;\n}\n\n.ttc-call-circle:nth-child(2) {\n  width: 64px;\n  height: 64px;\n  animation-delay: 0.5s;\n}\n\n.ttc-call-circle:nth-child(3) {\n  width: 72px;\n  height: 72px;\n  animation-delay: 1s;\n}\n\n/* Eyes Container */\n.ttc-eyes-container {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Robot Eyes */\n.ttc-bot-eye {\n  width: 8px;\n  height: 8px;\n  background: #000000;\n  border-radius: 50%;\n  position: relative;\n  transition: transform 0.05s ease-out;\n}\n\n.ttc-floating-bot:hover .ttc-bot-eye {\n  /* Remove color change, keep original black */\n}\n\n/* Single Antenna */\n.ttc-bot-antenna {\n  position: absolute;\n  top: -15px;\n  right: 6px;\n  width: 3px;\n  height: 15px;\n  transform-origin: bottom center;\n  transition: transform 0.05s ease-out;\n}\n\n.ttc-bot-antenna-base {\n  width: 3px;\n  height: 15px;\n  background: #000000;\n  border-radius: 1px;\n}\n\n.ttc-floating-bot:hover .ttc-bot-antenna-base {\n  /* Remove color change, keep original black */\n}\n\n/* Chat Panel */\n.ttc-chat-panel {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 360px;\n  height: 520px;\n  display: flex;\n  flex-direction: column;\n  background: var(--ttc-bg);\n  border: 1px solid var(--ttc-border);\n  border-radius: var(--ttc-radius);\n  box-shadow: var(--ttc-shadow);\n  overflow: hidden;\n  z-index: 9998;\n  font-family: var(--ttc-font);\n  transform: translateY(100%) scale(0.8);\n  opacity: 0;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ttc-chat-panel.ttc-panel-visible {\n  transform: translateY(0) scale(1);\n  opacity: 1;\n}\n\n.ttc-hidden {\n  display: none !important;\n}\n\n/* Chat Header */\n.ttc-chat-header {\n  padding: 12px 16px;\n  background: var(--ttc-header-bg);\n  color: var(--ttc-header-text);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--ttc-border);\n}\n\n.ttc-chat-header h4 {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.ttc-chat-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.ttc-chat-clear,\n.ttc-chat-reset,\n.ttc-chat-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  line-height: 1;\n  padding: 4px;\n  border-radius: 4px;\n  color: var(--ttc-header-text);\n  opacity: 0.7;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  position: relative;\n}\n\n.ttc-chat-clear:hover,\n.ttc-chat-reset:hover,\n.ttc-chat-close:hover {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.ttc-chat-clear:hover::after,\n.ttc-chat-reset:hover::after,\n.ttc-chat-close:hover::after {\n  content: attr(data-tooltip);\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: white;\n  color: var(--ttc-text);\n  padding: 6px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  border: 1px solid var(--ttc-border);\n  z-index: 10000;\n  margin-top: 4px;\n  opacity: 1;\n  pointer-events: none;\n}\n\n.ttc-chat-clear:hover::before,\n.ttc-chat-reset:hover::before,\n.ttc-chat-close:hover::before {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 4px solid transparent;\n  border-bottom-color: white;\n  margin-top: -1px;\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.ttc-chat-clear:active,\n.ttc-chat-reset:active,\n.ttc-chat-close:active {\n  transform: scale(0.95);\n}\n\n.ttc-chat-clear svg,\n.ttc-chat-reset svg {\n  width: 14px;\n  height: 14px;\n  stroke: currentColor;\n  transition: stroke 0.2s ease;\n}\n\n/* Chat Messages */\n.ttc-chat-messages {\n  flex: 1;\n  padding: 12px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column-reverse;\n  background: var(--ttc-messages-bg);\n}\n\n.ttc-chat-messages::-webkit-scrollbar {\n  width: 8px;\n}\n\n.ttc-chat-messages::-webkit-scrollbar-thumb {\n  background: var(--ttc-scrollbar);\n  border-radius: 4px;\n}\n\n.ttc-msg {\n  margin-bottom: 12px;\n  display: flex;\n}\n\n.ttc-msg-user {\n  justify-content: flex-end;\n  flex-direction: row-reverse;\n}\n\n.ttc-msg:last-child {\n  margin-bottom: 0;\n}\n\n.ttc-bubble {\n  max-width: 75%;\n  padding: 8px 12px;\n  border-radius: 18px;\n  font-size: 14px;\n  line-height: 1.4;\n  position: relative;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.ttc-bubble-user {\n  background: var(--ttc-user-bubble);\n  color: var(--ttc-user-bubble-text);\n  border-bottom-right-radius: 4px;\n}\n\n.ttc-bubble-ai {\n  background: var(--ttc-ai-bubble);\n  color: var(--ttc-ai-bubble-text);\n  border-bottom-left-radius: 4px;\n}\n\n/* Chat Footer */\n.ttc-chat-footer {\n  position: relative;\n  padding: 10px;\n  border-top: 1px solid var(--ttc-border);\n  background: var(--ttc-footer-bg);\n}\n\n.ttc-chat-status {\n  font-size: 12px;\n  color: var(--ttc-status-text);\n  text-align: center;\n  margin-bottom: 8px;\n  font-weight: 500;\n  opacity: 0.8;\n}\n\n.ttc-chat-form {\n  display: flex;\n  gap: 8px;\n}\n\n.ttc-input {\n  flex: 1;\n  padding: 10px 12px;\n  border: 1px solid var(--ttc-border);\n  border-radius: 20px;\n  font-size: 14px;\n  outline: none;\n}\n\n.ttc-input:focus {\n  border-color: var(--ttc-focus);\n  box-shadow: 0 0 0 2px rgba(79,70,229,.15);\n}\n\n\n/* Animations */\n@keyframes ttc-bot-float {\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-6px);\n  }\n}\n\n@keyframes ttc-call-glow {\n  0%, 100% {\n    transform: scale(1);\n    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);\n  }\n  50% {\n    transform: scale(1.1);\n    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6);\n  }\n}\n\n@keyframes ttc-call-ripple {\n  0% {\n    transform: translate(-50%, -50%) scale(0.8);\n    opacity: 0.8;\n  }\n  100% {\n    transform: translate(-50%, -50%) scale(1.2);\n    opacity: 0;\n  }\n}\n\n@keyframes ttc-bot-jump {\n  0%, 100% {\n    transform: translateY(0) scale(1);\n  }\n  25% {\n    transform: translateY(-8px) scale(1.05);\n  }\n  50% {\n    transform: translateY(-4px) scale(1.02);\n  }\n  75% {\n    transform: translateY(-10px) scale(1.08);\n  }\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n  .ttc-bot-container.ttc-bot-moved {\n    right: 20px;\n    transform: none;\n  }\n  \n  .ttc-chat-panel {\n    right: 20px;\n    left: 20px;\n    width: auto;\n  }\n}\n";
//# sourceMappingURL=styles.d.ts.map