.c9-ai-chat {
  --c9-ai-chat-z: 45;
  --ai-chat-fab-bg: var(--surface-2);
  --ai-chat-fab-text: var(--text);
  --ai-chat-panel-shadow: var(--shadow-pop-hover, var(--shadow-pop));
  --ai-chat-header-bg: var(--header-bg);
  --ai-chat-header-border: rgba(0, 0, 0, 0.08);
  --ai-chat-avatar-bg: var(--surface);
  --ai-chat-messages-bg: var(--section-board-bg, var(--surface));
  --ai-chat-bubble-bg: var(--surface);
  --ai-chat-bubble-border: rgba(0, 0, 0, 0.12);
  --ai-chat-bubble-text: var(--text);
  --ai-chat-user-bubble-bg: var(--chip-bg, var(--surface-2));
  --ai-chat-user-bubble-border: rgba(0, 0, 0, 0.14);
  --ai-chat-disclaimer-bg: var(--flash-warning-bg, #fff8e8);
  --ai-chat-disclaimer-text: var(--flash-warning-text, var(--muted));
  --ai-chat-composer-bg: var(--surface);
  --ai-chat-composer-border: rgba(0, 0, 0, 0.08);
  --ai-chat-input-bg: var(--surface);
  --ai-chat-input-border: rgba(0, 0, 0, 0.15);
  --ai-chat-input-text: var(--text);
  --ai-chat-input-focus-border: var(--accent-2);
  --ai-chat-input-focus-ring: rgba(0, 0, 0, 0.08);
  --ai-chat-send-bg: var(--btn-primary-bg);
  --ai-chat-send-text: var(--btn-primary-text, #ffffff);
  --ai-chat-error-bg: var(--flash-error-bg, #fff0f0);
  --ai-chat-error-border: var(--btn-danger-border, #f3b4b4);
  --ai-chat-error-text: var(--flash-error-text, #8a1f1f);
  --ai-chat-pre-bg: #2d1f3d;
  --ai-chat-pre-text: #f6f1ff;
  --ai-chat-code-bg: rgba(0, 0, 0, 0.08);
  --ai-chat-blockquote-border: var(--accent-2);
  --ai-chat-blockquote-bg: rgba(0, 0, 0, 0.04);
  --ai-chat-link: var(--link, var(--accent-2));
  --ai-chat-table-border: rgba(0, 0, 0, 0.15);
  --ai-chat-table-header-bg: rgba(0, 0, 0, 0.05);
  --ai-chat-hr-border: rgba(0, 0, 0, 0.15);
  --ai-chat-border-width: 2px;
  --ai-chat-panel-border-width: 3px;
  --ai-chat-bubble-radius: 16px;
  --ai-chat-control-radius: var(--radius, 14px);

  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--c9-ai-chat-z);
  font-family: var(--font-ui);
}

.c9-ai-chat__fab,
.c9-ai-chat__panel {
  display: none;
}

.c9-ai-chat.is-minimized .c9-ai-chat__fab {
  display: inline-flex;
}

.c9-ai-chat.is-expanded .c9-ai-chat__panel,
.c9-ai-chat.is-fullscreen .c9-ai-chat__panel {
  display: flex;
}

.c9-ai-chat__fab {
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1rem 0.75rem 0.85rem;
  border: var(--ai-chat-panel-border-width) solid var(--border-play);
  border-radius: 999px;
  background: var(--ai-chat-fab-bg);
  color: var(--ai-chat-fab-text);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.c9-ai-chat__fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop-hover);
}

.c9-ai-chat__fab-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.c9-ai-chat__panel {
  width: min(380px, calc(100vw - 2rem));
  height: min(520px, calc(100vh - 2rem));
  flex-direction: column;
  border: var(--ai-chat-panel-border-width) solid var(--border-play);
  border-radius: var(--ai-chat-control-radius);
  background: var(--surface);
  box-shadow: var(--ai-chat-panel-shadow);
  overflow: hidden;
  transform-origin: bottom right;
  animation: c9-ai-chat-pop-in 0.28s ease;
}

.c9-ai-chat.is-fullscreen .c9-ai-chat__panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border-width: 0;
  box-shadow: none;
  z-index: calc(var(--c9-ai-chat-z) + 1);
}

.c9-ai-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: var(--ai-chat-header-bg);
  border-bottom: var(--ai-chat-border-width) solid var(--ai-chat-header-border);
}

.c9-ai-chat__header-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.c9-ai-chat__avatar {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ai-chat-avatar-bg);
  border: var(--ai-chat-border-width) solid var(--border-play);
  font-size: 1.1rem;
}

.c9-ai-chat__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text);
}

.c9-ai-chat__subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.c9-ai-chat__header-actions {
  display: flex;
  gap: 0.35rem;
}

.c9-ai-chat__icon-btn {
  width: 2rem;
  height: 2rem;
  border: var(--ai-chat-border-width) solid var(--border-play);
  border-radius: var(--ai-chat-control-radius);
  background: var(--ai-chat-avatar-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.c9-ai-chat__icon-btn:hover {
  background: var(--surface-2);
}

.c9-ai-chat__messages {
  flex: 1;
  overflow: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--ai-chat-messages-bg);
}

.c9-ai-chat__message {
  display: flex;
}

.c9-ai-chat__message--user {
  justify-content: flex-end;
}

.c9-ai-chat__message--assistant {
  justify-content: flex-start;
}

.c9-ai-chat__bubble {
  max-width: 88%;
  padding: 0.65rem 0.8rem;
  border-radius: var(--ai-chat-bubble-radius) var(--ai-chat-bubble-radius) var(--ai-chat-bubble-radius) 6px;
  border: var(--ai-chat-border-width) solid var(--ai-chat-bubble-border);
  background: var(--ai-chat-bubble-bg);
  color: var(--ai-chat-bubble-text);
  word-break: break-word;
  font-size: 0.92rem;
  line-height: 1.55;
}

.c9-ai-chat__bubble--markdown > :first-child {
  margin-top: 0;
}

.c9-ai-chat__bubble--markdown > :last-child {
  margin-bottom: 0;
}

.c9-ai-chat__bubble--markdown p,
.c9-ai-chat__bubble--markdown ul,
.c9-ai-chat__bubble--markdown ol,
.c9-ai-chat__bubble--markdown blockquote,
.c9-ai-chat__bubble--markdown pre {
  margin: 0.45rem 0;
}

.c9-ai-chat__bubble--markdown h1,
.c9-ai-chat__bubble--markdown h2,
.c9-ai-chat__bubble--markdown h3,
.c9-ai-chat__bubble--markdown h4,
.c9-ai-chat__bubble--markdown h5,
.c9-ai-chat__bubble--markdown h6 {
  margin: 0.6rem 0 0.35rem;
  font-family: var(--font-display);
  line-height: 1.3;
  color: var(--ai-chat-bubble-text);
}

.c9-ai-chat__bubble--markdown h1 { font-size: 1.15rem; }
.c9-ai-chat__bubble--markdown h2 { font-size: 1.08rem; }
.c9-ai-chat__bubble--markdown h3 { font-size: 1rem; }

.c9-ai-chat__bubble--markdown ul,
.c9-ai-chat__bubble--markdown ol {
  padding-left: 1.25rem;
}

.c9-ai-chat__bubble--markdown li + li {
  margin-top: 0.2rem;
}

.c9-ai-chat__bubble--markdown blockquote {
  padding: 0.35rem 0.65rem;
  border-left: 3px solid var(--ai-chat-blockquote-border);
  background: var(--ai-chat-blockquote-bg);
  color: var(--muted);
}

.c9-ai-chat__bubble--markdown code {
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--ai-chat-code-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.c9-ai-chat__bubble--markdown pre {
  padding: 0.55rem 0.7rem;
  border-radius: var(--ai-chat-control-radius);
  background: var(--ai-chat-pre-bg);
  color: var(--ai-chat-pre-text);
  overflow-x: auto;
}

.c9-ai-chat__bubble--markdown pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 0.84em;
}

.c9-ai-chat__bubble--markdown a {
  color: var(--ai-chat-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c9-ai-chat__bubble--markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}

.c9-ai-chat__bubble--markdown th,
.c9-ai-chat__bubble--markdown td {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ai-chat-table-border);
  text-align: left;
}

.c9-ai-chat__bubble--markdown th {
  background: var(--ai-chat-table-header-bg);
}

.c9-ai-chat__bubble--markdown hr {
  margin: 0.6rem 0;
  border: 0;
  border-top: 1px solid var(--ai-chat-hr-border);
}

.c9-ai-chat__message--user .c9-ai-chat__bubble {
  border-radius: var(--ai-chat-bubble-radius) var(--ai-chat-bubble-radius) 6px var(--ai-chat-bubble-radius);
  background: var(--ai-chat-user-bubble-bg);
  border-color: var(--ai-chat-user-bubble-border);
  white-space: pre-line;
}

.c9-ai-chat__bubble--typing::after {
  content: "▋";
  animation: c9-ai-chat-blink 0.9s step-end infinite;
  margin-left: 0.15rem;
}

.c9-ai-chat__disclaimer {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-top: 1px solid var(--ai-chat-composer-border);
  background: var(--ai-chat-disclaimer-bg);
  color: var(--ai-chat-disclaimer-text);
  font-size: 0.75rem;
  line-height: 1.45;
}

.c9-ai-chat__disclaimer a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.c9-ai-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: var(--ai-chat-border-width) solid var(--ai-chat-composer-border);
  background: var(--ai-chat-composer-bg);
}

.c9-ai-chat__input {
  flex: 1;
  min-height: 2.5rem;
  max-height: 7rem;
  resize: none;
  border: var(--ai-chat-border-width) solid var(--ai-chat-input-border);
  border-radius: var(--ai-chat-control-radius);
  padding: 0.55rem 0.75rem;
  font: inherit;
  line-height: 1.45;
  background: var(--ai-chat-input-bg);
  color: var(--ai-chat-input-text);
}

.c9-ai-chat__input:focus {
  outline: none;
  border-color: var(--ai-chat-input-focus-border);
  box-shadow: 0 0 0 3px var(--ai-chat-input-focus-ring);
}

.c9-ai-chat__input::placeholder {
  color: var(--muted);
}

.c9-ai-chat__send {
  border: var(--ai-chat-border-width) solid var(--border-play);
  border-radius: var(--ai-chat-control-radius);
  padding: 0.55rem 0.85rem;
  background: var(--ai-chat-send-bg);
  color: var(--ai-chat-send-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.c9-ai-chat__send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.c9-ai-chat__error {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ai-chat-control-radius);
  background: var(--ai-chat-error-bg);
  border: 1px solid var(--ai-chat-error-border);
  color: var(--ai-chat-error-text);
  font-size: 0.85rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes c9-ai-chat-pop-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes c9-ai-chat-blink {
  50% {
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .c9-ai-chat.is-fullscreen {
    inset: 0;
    right: 0;
    bottom: 0;
  }

  .c9-ai-chat.is-fullscreen .c9-ai-chat__panel {
    right: auto;
    bottom: auto;
  }

  .c9-ai-chat.is-fullscreen .c9-ai-chat__header {
    padding-top: max(0.85rem, env(safe-area-inset-top));
  }

  .c9-ai-chat.is-fullscreen .c9-ai-chat__composer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .c9-ai-chat.is-fullscreen #c9-ai-chat-fullscreen {
    display: none;
  }

  .c9-ai-chat:not(.is-fullscreen) .c9-ai-chat__panel {
    width: calc(100vw - 1rem);
    height: min(70vh, calc(100dvh - 1rem));
    right: 0.5rem;
    bottom: 0.5rem;
  }
}