﻿/* ============================================================================
   AMC AI Assistant - Complete Stylesheet
   Part 1: Widget (outer shell - launcher button, window chrome)
   Part 2: Chat UI (inner - message bubbles, footer, dialogs)
   ============================================================================ */

/* ==========================================================================
   PART 1: AMC AI WIDGET (Outer Shell)
   ========================================================================== */

#amc-ai-widget-container {
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 35000;
  font-family: Arial, Helvetica, sans-serif;
}

#amc-ai-launcher {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(0, 120, 215);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.2s ease, background-color 0.2s;
}
#amc-ai-launcher .fa { color: white !important; }
#amc-ai-launcher:hover { transform: scale(1.05); background-color: rgb(0, 100, 190); }

#amc-ai-window {
  display: none;
  flex-direction: column;
  width: 440px;
  height: 660px;
  max-height: calc(100vh - 40px);
  background-color: white;
  border: 1px solid rgb(190, 190, 190);
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform-origin: bottom right;
  transition: all 0.3s ease;
}
#amc-ai-window.amc-ai-maximized {
  width: calc(100vw - 40px);
  height: calc(100vh - 60px);
}

#amc-ai-header {
  background-color: rgb(241, 241, 241);
  color: black;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid rgb(190, 190, 190);
  cursor: default;
}

#amc-ai-controls { display: flex; gap: 2px; }

.amc-ai-btn {
  background: transparent;
  border: none;
  color: rgb(100, 100, 100);
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.amc-ai-btn:hover { color: black; background-color: rgb(220, 220, 220); }

#amc-ai-iframe {
  flex-grow: 1;
  width: 100%;
  border: none;
  background-color: white;
}

/* ==========================================================================
   PART 2: AMC AI CHAT (Inner - iframe content)
   ========================================================================== */

/* --- Layout --- */

.amc-ai-chat-header {
  height: 44px;
  background: #f7f8fa;
  border-bottom: 1px solid #e2e5ea;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.amc-ai-chat-header h1 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: #2c3e50;
}
.amc-ai-chat-header button {
  background: #e74c3c;
  border: none;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

#amc-ai-total-tokens {
  flex-grow: 1;
  text-align: right;
  font-size: 0.9em;
  color: #666;
  margin-right: 15px;
  font-family: monospace;
}

.amc-ai-chat-body {
  flex: 1;
  padding: 16px 20px;
  background: #f9fafb;
  overflow-y: auto;
  overflow-x: hidden; /* chat nikdy nescrolluje do sirky - siroky obsah scrolluje uvnitr bubliny (pre, mermaid, tabulka) */
  min-width: 0;
}

.amc-ai-chat-footer {
  flex-shrink: 0;
  padding: 8px 10px;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid #e2e5ea;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
}

.amc-ai-chat-footer-wrapper {
  background-color: #fff;
  border: 1px solid #d5d9e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color 0.2s;
}
.amc-ai-chat-footer-wrapper:focus-within {
  border-color: #93b5e0;
  box-shadow: 0 0 0 2px rgba(41,128,185,0.12);
}

.amc-ai-chat-footer textarea {
  flex: 1;
  padding: 8px 5px;
  font-size: 1em;
  border-width: 0px;
  height: 4em;
  resize: none;
  outline: none;
  background-color: transparent;
}

.amc-ai-chat-footer button {
  margin-left: 6px;
  margin-right: 6px;
  padding: 6px 12px;
  font-size: 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}

/* --- Messages --- */

.amc-ai-msg {
  margin: 14px 0;
  line-height: 1.55;
  max-width: 100%;
  overflow-wrap: break-word; /* dlouhe nezalomitelne tokeny (URL, ID, ...) neroztahuji chat */
}

.amc-ai-msg--assistant {
  text-align: left;
  color: #3a3f47;
  background: #fff;
  border: 1px solid #e8ebef;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box; /* padding+border se vejdou do max-width, jinak bublina pretece o ~34px */
  min-width: 0;
}

.amc-ai-msg--user {
  text-align: left;
  background: #e8f0fe;
  border: 1px solid #d4e2f4;
  border-radius: 10px;
  padding: 12px 16px;
  color: #1a3a5c;
  line-height: 1.55;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin-left: auto;
}
.amc-ai-msg--user p { margin: 0.4em 0; }
.amc-ai-msg--user p:first-child { margin-top: 0; }
.amc-ai-msg--user p:last-child { margin-bottom: 0; }
.amc-ai-msg--user .amc-ai-msg-ts { color: #8ea7c8; }

.amc-ai-msg code {
  background-color: #f0f3f6;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
}
.amc-ai-msg pre {
  background-color: #f5f7f9;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto; /* dlouhe radky kodu scrolluji uvnitr pre, ne cely chat */
  border: 1px solid #e8ebef;
  max-width: 100%;
  box-sizing: border-box;
}
.amc-ai-msg pre code {
  background: transparent;
  padding: 0;
}
.amc-ai-msg ul, .amc-ai-msg ol {
  margin: 0.5em 0 0.5em 1.5em;
}

/* --- Internal messages (logs) --- */

.amc-ai-msg--internal details {
  border: 1px solid #e2e5ea;
  border-radius: 8px;
  background-color: #fdfdfe;
  margin: 8px 0;
}
.amc-ai-msg--internal summary {
  padding: 8px 12px;
  cursor: pointer;
  outline: none;
  font-weight: 600;
  color: #556;
  background-color: #f3f5f7;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.88em;
  border-radius: 8px 8px 0 0;
}
.amc-ai-msg--internal summary:hover { background-color: #e9ecf0; }
.amc-ai-msg--internal pre {
  padding: 12px;
  margin: 0;
  background-color: #fff;
  border-top: 1px solid #e8ebef;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  font-size: 0.85em;
  border-radius: 0 0 8px 8px;
}

/* Tool result summary colors */
.amc-ai-summary-ok { background-color: #e6ffed !important; color: #2d6b3d !important; }
.amc-ai-summary-ok:hover { background-color: #d4f7e1 !important; }
.amc-ai-summary-fail { background-color: #fff0f1 !important; color: #8a1c25 !important; }
.amc-ai-summary-fail:hover { background-color: #fddde0 !important; }
.amc-ai-summary-mixed { background-color: #fff8e1 !important; color: #8d6e0a !important; }
.amc-ai-summary-mixed:hover { background-color: #fceec4 !important; }

/* Hide internal messages mode */
.amc-ai-chat-body.amc-ai-hide-internal .amc-ai-msg--internal {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #d0d0d0;
  border-radius: 2px;
  padding: 0;
  border: none;
  margin: 2px;
  transition: all 0.2s ease-in-out;
}
.amc-ai-chat-body.amc-ai-hide-internal .amc-ai-msg--internal > * {
  display: none;
}

/* --- Timestamp --- */

.amc-ai-msg-ts {
  display: block;
  font-size: 0.75em;
  color: #aab0b8;
  margin-top: 6px;
  font-family: sans-serif;
  letter-spacing: 0.2px;
  overflow: hidden;
}
.amc-ai-ts-text { float: right; }

/* --- Markdown table --- */

table.amc-ai-table {
  border-collapse: collapse;
  border-width: 0px;
  margin-bottom: 16px;
  font-size: 0.95em;
  display: block; /* siroka tabulka scrolluje sama v sobe */
  overflow-x: auto;
  max-width: 100%;
  width: fit-content;
}
table.amc-ai-table th {
  padding: 8px 10px;
  background: #f5f7f9;
  font-weight: 600;
}
table.amc-ai-table td { padding: 6px 10px; }

/* --- Buttons --- */

#amc-ai-btn-send {
  background: #2980b9;
  color: white;
  font-size: 12px;
  border-radius: 6px;
  border: none;
}
#amc-ai-btn-send:hover { opacity: 0.7; }
#amc-ai-btn-send:disabled { opacity: 0.3; cursor: not-allowed; }

#amc-ai-btn-stop {
  font-size: 12px;
  background: #e74c3c;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  animation: amc-ai-pulse-glow 1.5s infinite;
}
#amc-ai-btn-stop:hover { opacity: 0.7; }

#amc-ai-btn-wait {
  padding-right: 0px;
  background-color: white;
}
#amc-ai-btn-wait div.amc-ai-spinner {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, .8);
}

#amc-ai-btn-delete {
  background: #ebedf0;
  color: #555;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #d5d9e0;
  font-weight: bold;
  padding: 8px 12px;
}
#amc-ai-btn-delete:hover { opacity: 0.7; }

#amc-ai-btn-console {
  background: #ebedf0;
  color: #555;
  font-weight: bold;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #d5d9e0;
  padding: 8px 15px;
  margin-right: 4px;
}
#amc-ai-btn-console:hover { opacity: 0.7; }

#amc-ai-btn-toggle-internal {
  background: #ebedf0;
  color: #555;
  font-weight: bold;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #d5d9e0;
  padding: 8px 12px;
  margin-right: 4px;
  transition: opacity 0.15s;
}
#amc-ai-btn-toggle-internal:hover { opacity: 0.7; }
#amc-ai-btn-toggle-internal.active {
  background-color: #dce8f7;
  border-color: #b5cde6;
  color: #2c5282;
}

/* --- Spinner --- */

.amc-ai-spinner {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  animation: amc-ai-spin .6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes amc-ai-spin {
  to { transform: rotate(360deg); }
}

@keyframes amc-ai-pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* --- File upload --- */

#amc-ai-file-upload-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  width: 100%;
}

#amc-ai-file-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.amc-ai-img-preview {
  border: 1px solid #d5d9e0;
  padding: 2px;
  background: white;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}
.amc-ai-img-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.amc-ai-file-preview {
  border: 1px solid #d5d9e0;
  padding: 5px;
  background: white;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  text-align: center;
  box-sizing: border-box;
}
.amc-ai-file-preview-icon { font-size: 2.5em; color: #555; }
.amc-ai-file-preview-name {
  font-size: 0.75em;
  margin-top: 8px;
  color: #333;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#amc-ai-btn-clear-file {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  margin-left: 8px;
  padding: 0;
  flex-shrink: 0;
}
#amc-ai-btn-clear-file:hover { opacity: 0.8; }
#amc-ai-btn-clear-file:disabled { opacity: 0.3; cursor: not-allowed; }

#amc-ai-upload-label {
  cursor: pointer;
  padding: 6px;
  margin-left: 6px;
  margin-right: 6px;
  background: #ebedf0;
  color: #555;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #d5d9e0;
  transition: opacity 0.15s;
}
#amc-ai-upload-label:hover { opacity: 0.7; }
#amc-ai-file-upload:disabled + #amc-ai-upload-label { opacity: 0.3; cursor: not-allowed; }

/* --- Microphone --- */

#amc-ai-btn-mic {
  background: #ebedf0;
  color: #555;
  font-size: 12px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #d5d9e0;
  margin-right: 6px;
  display: none;
  transition: transform 0.2s ease-out;
}
#amc-ai-btn-mic:hover { opacity: 0.7; }
#amc-ai-btn-mic:disabled { opacity: 0.3; cursor: not-allowed; }
#amc-ai-btn-mic.amc-ai-recording {
  background-color: #e74c3c;
  color: white;
  border-color: #e74c3c;
  transform: scale(1.05);
  animation: amc-ai-pulse-glow 1.5s infinite;
}

/* --- Typing indicator --- */

.amc-ai-typing {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  padding-left: 8px;
}
.amc-ai-typing span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #9ca3af;
  margin: 0 3px;
  animation: amc-ai-typing-bounce 1.4s infinite both;
}
.amc-ai-typing span:nth-child(1) { animation-delay: 0.2s; }
.amc-ai-typing span:nth-child(2) { animation-delay: 0.4s; }
.amc-ai-typing span:nth-child(3) { animation-delay: 0.6s; }

@keyframes amc-ai-typing-bounce {
  0% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 0.2; transform: translateY(0); }
}

/* --- Pause / delay indicator --- */

.amc-ai-pause {
  display: block;
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 8px 12px;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 0.9em;
  text-align: center;
  font-family: sans-serif;
}

/* --- File citation --- */

.amc-ai-citation {
  display: inline-block;
  background-color: #e9f5ff;
  color: #005a9e;
  border: 1px solid #b8daff;
  border-radius: 4px;
  padding: 2px 8px 2px 6px;
  font-size: 0.8em;
  font-family: monospace;
  margin: 0 4px;
  white-space: nowrap;
  vertical-align: baseline;
}
.amc-ai-citation::before {
  content: '\1F4C4';
  margin-right: 4px;
  font-family: sans-serif;
}

/* --- Character counter --- */

#amc-ai-char-counter {
  font-size: 0.75em;
  color: #999;
  text-align: right;
  padding: 2px 6px 0;
  font-family: monospace;
  line-height: 1.2;
  flex-shrink: 0;
  align-self: flex-end;
}
#amc-ai-char-counter.warning { color: #e67e22; }
#amc-ai-char-counter.over { color: #e74c3c; font-weight: bold; }

/* --- Debug console --- */

#amc-ai-debug-console {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-height: 40vh;
  overflow-y: auto;
  background: #111;
  color: #eee;
  font-family: monospace;
  padding: 8px 12px 12px;
  z-index: 9999;
}
.amc-ai-console-close { float: right; cursor: pointer; margin-bottom: 8px; }
.amc-ai-console-entry { margin-bottom: 6px; white-space: pre-wrap; }
.amc-ai-console-ts { color: #6cf; }

/* --- Status messages (notifications) --- */

#amc-ai-status-container {
  position: fixed;
  top: 15px;
  right: 15px;
  max-width: 450px;
  z-index: 10100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.amc-ai-status-msg {
  padding: 12px 16px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(100%);
  animation: amc-ai-slide-in 0.4s ease-out forwards;
  cursor: pointer;
}
.amc-ai-status-msg::before {
  font-family: sans-serif;
  font-size: 1.2em;
  margin-right: 12px;
}
.amc-ai-status-msg.error { background-color: #d9534f; border-left: 5px solid #c9302c; }
.amc-ai-status-msg.error::before { content: '\274C'; }
.amc-ai-status-msg.warning { background-color: #f0ad4e; border-left: 5px solid #ec971f; }
.amc-ai-status-msg.warning::before { content: '\26A0\FE0F'; }
.amc-ai-status-msg.information { background-color: #5bc0de; border-left: 5px solid #46b8da; }
.amc-ai-status-msg.information::before { content: '\2139\FE0F'; }
.amc-ai-status-msg.amc-ai-closing {
  animation: amc-ai-slide-out 0.4s ease-in forwards;
}

@keyframes amc-ai-slide-in {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes amc-ai-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* --- Context window indicator (donut) --- */

#amc-ai-ctx-indicator {
  background: transparent;
  border: none;
  padding: 4px;
  margin-right: 4px;
  cursor: pointer;
  display: none;
  transition: opacity 0.15s;
  line-height: 0;
}
#amc-ai-ctx-indicator:hover { opacity: 0.7; }
#amc-ai-ctx-indicator svg { display: block; }

#amc-ai-ctx-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-height: 100vh;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 0 0 0 8px;
  box-shadow: -4px 4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
}
.amc-ai-ctx-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  background: #f8f8f8;
}
.amc-ai-ctx-panel-header span {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
}
.amc-ai-ctx-panel-close {
  cursor: pointer;
  font-size: 16px;
  color: #999;
  padding: 2px 6px;
}
.amc-ai-ctx-panel-close:hover { color: #333; }
.amc-ai-ctx-panel-body { padding: 0; }

.amc-ai-ctx-section { padding: 10px 14px; border-bottom: 1px solid #eee; }
.amc-ai-ctx-section:last-child { border-bottom: none; }
.amc-ai-ctx-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-bottom: 6px;
}
.amc-ai-ctx-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.amc-ai-ctx-row:last-child { margin-bottom: 0; }
.amc-ai-ctx-row-label { color: #555; }
.amc-ai-ctx-row-value { font-weight: 600; font-family: monospace; }

.amc-ai-ctx-bar { height: 6px; background: #eee; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.amc-ai-ctx-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.amc-ai-ctx-bar-fill.green { background: #28a745; }
.amc-ai-ctx-bar-fill.yellow { background: #ffc107; }
.amc-ai-ctx-bar-fill.red { background: #dc3545; }

.amc-ai-ctx-detail { color: #888; font-size: 11px; margin-top: 2px; }

.amc-ai-ctx-alert { padding: 8px 14px; font-size: 12px; font-weight: 600; }
.amc-ai-ctx-alert.warn { background: #fff3cd; color: #856404; }
.amc-ai-ctx-alert.danger { background: #f8d7da; color: #721c24; }

.amc-ai-ctx-disclaimer {
  padding: 8px 14px;
  font-size: 11px;
  color: #999;
  border-top: 1px solid #eee;
  font-style: italic;
  line-height: 1.4;
}

/* --- Mermaid diagrams --- */

.amc-ai-mermaid-wrapper {
  margin: 14px 0;
  max-width: 100%;
  min-width: 0;
}
.amc-ai-mermaid-preview {
  background: #ffffff;
  padding: 12px;
  border: 1px solid #e8ebef;
  border-radius: 8px;
  overflow-x: auto;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}
.amc-ai-mermaid-preview pre {
  margin: 0;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
}
.amc-ai-mermaid-preview svg { max-width: 100%; height: auto; }

/* --- Feedback buttons --- */

.amc-ai-msg-feedback { display: inline-flex; gap: 4px; }

.amc-ai-fb-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
  color: #ccc;
  line-height: 1;
}
.amc-ai-fb-btn:hover { color: #888; border-color: #ddd; }
.amc-ai-fb-btn.amc-ai-fb-up.active { color: #28a745; border-color: #28a745; background: #e6ffed; }
.amc-ai-fb-btn.amc-ai-fb-down.active { color: #dc3545; border-color: #dc3545; background: #fff0f1; }

/* --- Feedback dialog --- */

.amc-ai-fb-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amc-ai-fb-dialog {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 450px;
  max-height: 90vh;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

.amc-ai-fb-dialog-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.amc-ai-fb-dialog-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #333; }

.amc-ai-fb-dialog-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0 4px;
}
.amc-ai-fb-dialog-close:hover { color: #333; }

.amc-ai-fb-dialog-body {
  padding: 20px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.amc-ai-fb-reasons { margin-bottom: 16px; flex: 1; overflow-y: auto; min-height: 0; }
.amc-ai-fb-reasons-title { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 10px; }

.amc-ai-fb-reason-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  cursor: pointer;
}
.amc-ai-fb-reason-item input[type="checkbox"] { margin-right: 10px; margin-top: 2px; cursor: pointer; }
.amc-ai-fb-reason-label { flex: 1; }
.amc-ai-fb-reason-name { font-size: 13px; font-weight: 500; color: #333; }
.amc-ai-fb-reason-desc { font-size: 11px; color: #888; margin-top: 2px; }

.amc-ai-fb-comment { flex-shrink: 0; }
.amc-ai-fb-text-label { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; display: block; }
.amc-ai-fb-text-input {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #d5d9e0;
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}
.amc-ai-fb-text-input:focus { outline: none; border-color: #93b5e0; box-shadow: 0 0 0 2px rgba(41,128,185,0.12); }

.amc-ai-fb-dialog-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.amc-ai-fb-btn-cancel {
  background: #ebedf0;
  color: #555;
  border: 1px solid #d5d9e0;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.amc-ai-fb-btn-cancel:hover { background: #dce0e5; }

.amc-ai-fb-btn-submit {
  background: #2980b9;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.amc-ai-fb-btn-submit:hover { opacity: 0.85; }
.amc-ai-fb-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Skills toggle --- */

#amc-ai-skills-container {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 4px 0;
  align-items: center;
}
#amc-ai-skills-container::before {
  font-size: 0.72em;
  color: #bbb;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 2px;
  flex-shrink: 0;
  align-self: center;
}

.amc-ai-skill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 0.82em;
  border-radius: 5px;
  border: 1px solid #d5d9e0;
  margin-left: 1px;
  background: #f0f2f5;
  color: #aaa;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  user-select: none;
  font-weight: 500;
}
.amc-ai-skill:hover { border-color: #b5cde6; color: #555; background: #e8ecf0; }
.amc-ai-skill.active { background: #2980b9; border-color: #2471a3; color: #fff; font-weight: 600; }
.amc-ai-skill.active::before { content: '\2713'; }

/* --- Attachments (in messages) --- */

.amc-ai-attach {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-left: 8px;
}
.amc-ai-attach-img {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center center;
}

/* --- Links (scoped to chat messages) --- */

.amc-ai-msg a { text-decoration: none; color: #2980b9; }
.amc-ai-msg a:hover { opacity: 0.7; }

/* --- Responsive --- */

@media (max-width: 600px) {
  .amc-ai-chat-header, .amc-ai-chat-footer { padding: 4px 8px; }
  .amc-ai-chat-header h1 { font-size: 1.1em; }
  .amc-ai-chat-body { padding: 8px; }
  .amc-ai-msg--user { padding: 10px 12px; }
  .amc-ai-chat-footer-wrapper { padding: 0 4px; }
  .amc-ai-chat-footer textarea { padding: 10px 8px; font-size: 1.1em; }
  #amc-ai-upload-label, .amc-ai-chat-footer button {
    font-size: 1.1em;
    padding: 20px 8px;
    margin-left: 4px;
    margin-right: 4px;
  }
  #amc-ai-btn-send { font-size: 1.1em; padding: 20px 12px; }
  #amc-ai-btn-stop { font-size: 1.1em; padding: 20px 12px; }
  .amc-ai-spinner { width: 12px; height: 12px; }
  #amc-ai-btn-clear-file { width: 24px; height: 24px; line-height: 24px; font-size: 14px; }
  #amc-ai-btn-mic { font-size: 1.1em; padding: 20px 8px; }
}
