/* scripts/styles/assistant.css */
/* Complete assistant styling - basic tooltip + chat interface */

/* ============================== CSS Variables ============================== */
:root {
  --assistant-size: 64px;
  --assistant-gap: 12px;
  --assistant-z: 99999;
  
  /* Chat specific */
  --chat-bg: var(--bg);
  --chat-user-bg: #f1f5f9;
  --chat-assistant-bg: #eef7ff;
  --chat-border: #ddd;
  --chat-text: var(--text);
}

/* Dark mode variables */
body[data-theme="dark"] {
  --chat-user-bg: rgba(255,255,255,0.1);
  --chat-assistant-bg: rgba(34,197,94,0.1);
  --chat-border: rgba(255,255,255,0.2);
}

/* ============================== Basic Assistant ============================== */

/* Floating avatar container */
.assistant {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--assistant-z);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  cursor: grab;
  user-select: none;
}

.assistant:active { 
  cursor: grabbing; 
}

/* Avatar image */
.assistant-avatar {
  width: var(--assistant-size);
  height: var(--assistant-size);
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: var(--neu-out);
  transition: transform 0.2s ease;
}

.assistant-avatar:hover {
  transform: scale(1.05);
}

/* ============================== Basic Tooltip Bubble ============================== */

#assistantBubble {
  position: fixed;
  bottom: calc(20px + var(--assistant-size) + var(--assistant-gap));
  right: 20px;
  max-width: min(360px, 80vw);
  padding: 14px 44px 14px 18px; /* extra right padding for close button */
  border-radius: 12px;
  display: none;
  z-index: var(--assistant-z);

  background:
    radial-gradient(140px 80px at 18% 26%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  color: var(--text);

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--neu-out);
  
  /* Animation */
  animation: assistantFadeIn 0.15s ease-out;
}

@keyframes assistantFadeIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Dark mode bubble adjustments */
body[data-theme="dark"] #assistantBubble {
  border-color: rgba(255,255,255,.10);
}

/* Show state */
#assistantBubble.show { 
  display: block !important; 
}

/* Speech bubble arrow pointing to avatar */
#assistantBubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  right: calc((var(--assistant-size) / 2) - 8px);
  border-width: 16px 12px 0;
  border-style: solid;
  border-color: var(--bg-2) transparent transparent transparent;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.12));
}

body[data-theme="dark"] #assistantBubble::after {
  border-color: var(--bg-2) transparent transparent transparent;
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.08));
}

/* ============================== Close Button ============================== */

#assistantClose {
  position: absolute;
  right: 10px;
  top: 8px;
  background: rgba(0,0,0,.06);
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease;
}

#assistantClose:hover { 
  background: rgba(0,0,0,.10); 
}

body[data-theme="dark"] #assistantClose {
  background: rgba(255,255,255,.12);
  color: #fff;
}

body[data-theme="dark"] #assistantClose:hover { 
  background: rgba(255,255,255,.18); 
}

/* ============================== Text Content ============================== */

#assistantText {
  display: block;
  margin: 0;
  padding-right: 24px; /* space so text doesn't overlap close button */
  line-height: 1.4;
}

/* Safety: hide any accidental buttons except close */
#assistantBubble button:not(#assistantClose) {
  display: none !important;
}

/* ============================== Chat Enhancement ============================== */

/* When chat is enabled, modify bubble layout */
.assistant--chat-enabled #assistantBubble {
  max-width: min(400px, 85vw);
  padding: 14px 18px;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.assistant--chat-enabled #assistantText {
  padding-right: 28px; /* space for close button */
  margin-bottom: 8px;
  font-size: 14px;
  opacity: 0.8;
}

/* ============================== Chat Form ============================== */

.clippy-form {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-shrink: 0;
}

.clippy-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--chat-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.clippy-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.clippy-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.clippy-send {
  padding: 8px 12px;
  border: 1px solid var(--chat-border);
  background: var(--bg);
  color: var(--chat-text);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.clippy-send:hover:not(:disabled) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.clippy-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================== Chat Log ============================== */

.clippy-log {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  flex-grow: 1;
  padding: 4px 0;
}

/* Custom scrollbar */
.clippy-log::-webkit-scrollbar {
  width: 6px;
}

.clippy-log::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

.clippy-log::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
}

.clippy-log::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}

/* ============================== Chat Messages ============================== */

.clippy-log .line {
  padding: 6px 10px;
  border-radius: 12px;
  max-width: 85%;
  word-wrap: break-word;
  line-height: 1.3;
  animation: messageSlideIn 0.2s ease-out;
}

@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* User messages (right-aligned) */
.clippy-log .line.user {
  align-self: flex-end;
  background: var(--chat-user-bg);
  color: var(--text);
  border-bottom-right-radius: 4px;
}

/* Assistant messages (left-aligned) */
.clippy-log .line.assistant {
  align-self: flex-start;
  background: var(--chat-assistant-bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

/* Thinking animation for assistant messages */
.clippy-log .line.assistant[data-thinking="true"] {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ============================== Error States ============================== */

.assistant--error #assistantBubble {
  border-color: #ef4444;
  background: linear-gradient(145deg, #fef2f2, #fee2e2);
}

body[data-theme="dark"] .assistant--error #assistantBubble {
  border-color: #dc2626;
  background: linear-gradient(145deg, #1f1f1f, #2d1b1b);
}

.assistant--error #assistantText {
  color: #dc2626;
}

body[data-theme="dark"] .assistant--error #assistantText {
  color: #f87171;
}

/* ============================== Mobile Responsive ============================== */

@media (max-width: 640px) {
  :root { 
    --assistant-size: 56px; 
  }
  
  .assistant {
    right: 12px;
    bottom: 12px;
  }
  
  #assistantBubble {
    right: 12px;
    bottom: calc(12px + var(--assistant-size) + 8px);
    max-width: 72vw;
    padding: 10px 32px 10px 12px;
    font-size: 14px;
  }
  
  .assistant--chat-enabled #assistantBubble {
    max-width: 90vw;
    max-height: 50vh;
  }
  
  #assistantBubble::after {
    right: 36px;
    border-width: 14px 10px 0;
    bottom: -14px;
  }
  
  .clippy-log {
    max-height: 140px;
  }
  
  .clippy-input, .clippy-send {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* ============================== Loading States ============================== */

.assistant--loading .assistant-avatar {
  animation: assistantPulse 2s ease-in-out infinite;
}

@keyframes assistantPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* ============================== Accessibility ============================== */

/* Focus states */
.clippy-input:focus,
.clippy-send:focus,
#assistantClose:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #assistantBubble,
  .clippy-log .line,
  .assistant-avatar {
    animation: none !important;
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #assistantBubble {
    border: 2px solid;
  }
  
  .clippy-input,
  .clippy-send {
    border: 2px solid;
  }
}