/* ============================================================
   Open WebUI Chatbot – Frontend Styles
   ============================================================ */

:root {
  --owui-primary: #2563eb;
  --owui-primary-dark: #1d4ed8;
  --owui-primary-light: #eff6ff;
  --owui-bg: #ffffff;
  --owui-surface: #f8fafc;
  --owui-border: #e2e8f0;
  --owui-text: #1e293b;
  --owui-text-muted: #64748b;
  --owui-bot-bubble: #f1f5f9;
  --owui-radius: 16px;
  --owui-shadow: 0 20px 60px -10px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
  --owui-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --owui-transition: .25s cubic-bezier(.4,0,.2,1);
}

.owui-chat-container {
  display: flex;
  flex-direction: column;
  font-family: var(--owui-font);
  font-size: 14px;
  color: var(--owui-text);
  background: var(--owui-bg);
  box-sizing: border-box;
  line-height: 1.5;
}
.owui-chat-container *, .owui-chat-container *::before, .owui-chat-container *::after { box-sizing: border-box; }

/* Header */
.owui-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--owui-primary); color: #fff;
  border-radius: var(--owui-radius) var(--owui-radius) 0 0;
  flex-shrink: 0;
}
.owui-header-avatar {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.owui-header-info { flex: 1; min-width: 0; }
.owui-header-name { font-weight: 600; font-size: 15px; }
.owui-header-status { font-size: 11px; opacity: .8; display: flex; align-items: center; gap: 4px; }
.owui-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; display: inline-block;
  animation: owui-pulse 2s infinite;
}
@keyframes owui-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.owui-header-clear {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  border-radius: 8px; padding: 4px 8px; font-size: 11px; cursor: pointer;
  transition: background var(--owui-transition);
}
.owui-header-clear:hover { background: rgba(255,255,255,.25); }

/* Messages */
.owui-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--owui-border) transparent;
}
.owui-messages::-webkit-scrollbar { width: 4px; }
.owui-messages::-webkit-scrollbar-thumb { background: var(--owui-border); border-radius: 4px; }

.owui-row { display: flex; align-items: flex-end; gap: 8px; animation: owui-slide-in .2s ease; }
@keyframes owui-slide-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.owui-row--user { flex-direction: row-reverse; }

.owui-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.owui-row--bot  .owui-avatar { background: var(--owui-primary-light); color: var(--owui-primary); }
.owui-row--user .owui-avatar { background: #e2e8f0; }

.owui-bubble {
  max-width: 76%; padding: 10px 14px;
  border-radius: 18px; font-size: 14px; line-height: 1.55;
  word-break: break-word;
}
.owui-row--user .owui-bubble { background: var(--owui-primary); color: #fff; border-bottom-right-radius: 4px; }
.owui-row--bot  .owui-bubble { background: var(--owui-bot-bubble); color: var(--owui-text); border-bottom-left-radius: 4px; }
.owui-row--bot .owui-bubble p { margin: 0 0 .5em; }
.owui-row--bot .owui-bubble p:last-child { margin-bottom: 0; }
.owui-row--bot .owui-bubble code { background: rgba(0,0,0,.07); border-radius: 4px; padding: 1px 5px; font-size: .85em; font-family: 'Courier New',monospace; }
.owui-row--bot .owui-bubble pre { background: #1e293b; color: #e2e8f0; border-radius: 10px; padding: 12px; overflow-x: auto; font-size: .82em; margin: .5em 0; }
.owui-row--bot .owui-bubble pre code { background: none; color: inherit; padding: 0; font-size: 1em; }

/* Typing */
.owui-typing-dots { display: flex; align-items: center; gap: 4px; padding: 12px 16px; }
.owui-typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--owui-text-muted); display: inline-block;
  animation: owui-dot-bounce .9s infinite;
}
.owui-typing-dots span:nth-child(2){animation-delay:.15s}
.owui-typing-dots span:nth-child(3){animation-delay:.30s}
@keyframes owui-dot-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-5px);opacity:1} }

.owui-error { color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:9px 13px;font-size:13px;margin:0 4px; }

/* Input */
.owui-input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--owui-border);
  background: var(--owui-bg);
  border-radius: 0 0 var(--owui-radius) var(--owui-radius);
  flex-shrink: 0;
}
.owui-input {
  flex: 1; resize: none;
  border: 1.5px solid var(--owui-border); border-radius: 12px;
  padding: 9px 13px; font-family: var(--owui-font); font-size: 14px;
  line-height: 1.5; outline: none;
  transition: border-color var(--owui-transition);
  max-height: 120px; min-height: 42px;
  background: var(--owui-surface); color: var(--owui-text);
}
.owui-input:focus { border-color: var(--owui-primary); background: #fff; }
.owui-input::placeholder { color: var(--owui-text-muted); }
.owui-send-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: none; background: var(--owui-primary); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--owui-transition), transform var(--owui-transition), opacity var(--owui-transition);
}
.owui-send-btn:hover  { background: var(--owui-primary-dark); transform: scale(1.05); }
.owui-send-btn:active { transform: scale(.96); }
.owui-send-btn:disabled { opacity: .5; cursor: default; transform: none; }
.owui-send-btn svg { width: 18px; height: 18px; }
.owui-powered { text-align:center; font-size:10px; color:var(--owui-text-muted); padding: 4px 14px 8px; }
.owui-powered a { color:inherit; text-decoration:none; }
.owui-powered a:hover { text-decoration:underline; }

/* Floating bubble */
.owui-chat-float { position:fixed; bottom:24px; right:24px; z-index:99999; font-family:var(--owui-font); }
.owui-float-toggle {
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--owui-primary); color:#fff; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--owui-transition), box-shadow var(--owui-transition);
  position:relative; z-index:1;
}
.owui-float-toggle:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(0,0,0,.25); }
.owui-float-toggle svg { width:24px; height:24px; transition:opacity var(--owui-transition),transform var(--owui-transition); position:absolute; }
.owui-icon-close { opacity:0; transform:rotate(-90deg); }
.owui-icon-chat  { opacity:1; transform:rotate(0deg); }
.owui-chat-float.is-open .owui-icon-close { opacity:1; transform:rotate(0deg); }
.owui-chat-float.is-open .owui-icon-chat  { opacity:0; transform:rotate(90deg); }

.owui-float-panel {
  position:absolute; bottom:68px; right:0;
  width:360px; height:520px;
  border-radius:var(--owui-radius);
  box-shadow:var(--owui-shadow);
  border:1px solid var(--owui-border);
  overflow:hidden;
  transform-origin:bottom right;
  transform:scale(.9) translateY(10px);
  opacity:0; pointer-events:none;
  transition:transform var(--owui-transition), opacity var(--owui-transition);
}
.owui-chat-float.is-open .owui-float-panel { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

/* Embed */
.owui-embed-wrapper { width:100%; border-radius:var(--owui-radius); overflow:hidden; box-shadow:var(--owui-shadow); border:1px solid var(--owui-border); }
.owui-embed { height:100%; border-radius:var(--owui-radius); }

@media(max-width:480px){
  .owui-float-panel { width:calc(100vw - 24px); right:-12px; bottom:68px; }
  .owui-chat-float  { bottom:16px; right:16px; }
}