#ai-tab {
  height: 100%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.ai-chat-panel {
  --chat-blue: #245eea;
  --chat-blue-dark: #1747bd;
  --chat-blue-soft: #f1f5ff;
  --chat-green: #11a683;
  --chat-ink: #252b35;
  --chat-muted: #69717d;
  --chat-line: #e2e6eb;
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  color: var(--chat-ink);
  background: #fff;
}

.ai-chat-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--chat-line);
}

.ai-chat-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 7px;
  background: var(--chat-blue);
  box-shadow: 0 5px 14px rgba(36, 94, 234, .2);
}

.ai-chat-title { min-width: 0; }
.ai-chat-kicker { margin: 0 0 3px; color: var(--chat-blue); font-size: 10px; line-height: 1.2; font-weight: 750; text-transform: uppercase; }
.ai-chat-header h2 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: 0; }
.ai-chat-header-actions { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.ai-chat-header-actions button { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; padding: 0; color: #65707c; border: 1px solid var(--chat-line); border-radius: 5px; background: #fff; }
.ai-chat-header-actions button:hover { color: var(--chat-blue); border-color: #a9b9e5; background: var(--chat-blue-soft); }

.ai-credit-summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 14px 0;
  padding: 10px 12px;
  border: 1px solid #d9e1f2;
  border-radius: 6px;
  background: #f7f9fe;
}

.ai-credit-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: var(--chat-blue);
  border-radius: 5px;
  background: #e8eefc;
}

.ai-credit-copy { min-width: 0; display: flex; flex-direction: column; }
.ai-credit-copy strong { font-size: 16px; line-height: 1.2; }
.ai-credit-copy small { margin-top: 3px; color: var(--chat-muted); font-size: 10px; white-space: nowrap; }
.ai-controls-badge { margin-left: auto; padding: 5px 7px; color: #176c59; font-size: 9px; font-weight: 700; white-space: nowrap; border: 1px solid #b7dacf; border-radius: 4px; background: #eef8f5; }
.ai-controls-badge i { margin-right: 3px; }

.ai-chat-messages {
  min-height: 90px;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 14px 6px;
  scrollbar-width: thin;
  scrollbar-color: #cbd1d9 transparent;
}

.ai-chat-message { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; }
.ai-chat-message.user { justify-content: flex-end; }
.ai-message-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--chat-blue); border-radius: 5px; background: #e8eefc; font-size: 11px; }
.ai-message-body { max-width: 88%; padding: 10px 11px; border: 1px solid #e0e5ed; border-radius: 6px; background: #f8f9fb; }
.ai-chat-message.user .ai-message-body { color: #fff; border-color: var(--chat-blue); background: var(--chat-blue); }
.ai-message-body p { margin: 0; font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.ai-follow-up-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: -3px 12px 12px 38px; }
.ai-follow-up-suggestions button { max-width: 100%; padding: 7px 9px; color: #4c5663; font-size: 10px; line-height: 1.35; text-align: left; border: 1px solid var(--chat-line); border-radius: 5px; background: #fff; cursor: pointer; }
.ai-follow-up-suggestions button:hover { color: var(--chat-blue); border-color: #a9b9e5; background: var(--chat-blue-soft); }
.ai-plan-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e1e5ea; }
.ai-plan-details summary { width: fit-content; color: var(--chat-blue); font-size: 10px; line-height: 1.35; cursor: pointer; list-style: none; }
.ai-plan-details summary::-webkit-details-marker { display: none; }
.ai-plan-details summary::after { content: ' +'; color: #7b8794; }
.ai-plan-details[open] summary::after { content: ' -'; }
.ai-plan-detail-list { margin-top: 6px; color: #5e6875; font-size: 10px; line-height: 1.45; }
.ai-plan-detail-list p { margin: 3px 0; }
.ai-chat-thinking .ai-message-body { color: var(--chat-muted); }
.ai-thinking-dot { display: inline-block; width: 5px; height: 5px; margin: 0 2px; border-radius: 50%; background: currentColor; animation: ai-chat-pulse 1.1s ease-in-out infinite; }
.ai-thinking-dot:nth-child(2) { animation-delay: .15s; }
.ai-thinking-dot:nth-child(3) { animation-delay: .3s; }

@keyframes ai-chat-pulse {
  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.ai-source-drawer { margin: 5px 14px 0; border: 1px solid var(--chat-line); border-radius: 6px; background: #fff; }
.ai-source-drawer summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 11px; cursor: pointer; list-style: none; color: #36404c; font-size: 11px; font-weight: 700; }
.ai-source-drawer summary::-webkit-details-marker { display: none; }
.ai-source-drawer summary i { margin-right: 6px; color: var(--chat-blue); }
.ai-source-drawer summary small { max-width: 150px; overflow: hidden; color: #7a828d; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ai-source-drawer[open] { border-color: #b9c7ec; box-shadow: 0 0 0 2px rgba(36, 94, 234, .06); }
.ai-source-editor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 0 11px 11px; }
#ai-source-text { grid-column: 1 / -1; width: 100%; min-height: 80px; resize: vertical; padding: 9px; color: #222a34; font-size: 11px; line-height: 1.45; border: 1px solid #d7dce2; border-radius: 5px; outline: 0; background: #fbfcfd; }
#ai-source-text:focus { border-color: var(--chat-blue); box-shadow: 0 0 0 2px rgba(36, 94, 234, .1); }
.ai-source-editor label { color: var(--chat-muted); font-size: 10px; }
#ai-source-language { min-height: 32px; max-width: 140px; padding: 0 7px; font-size: 10px; border: 1px solid #d7dce2; border-radius: 4px; background: #fff; }

.ai-chat-suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px 14px 5px; }
.ai-chat-suggestions-label { grid-column: 1 / -1; color: #7a828d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.ai-chat-suggestions button { min-width: 0; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 7px; color: #4c5663; font-size: 10px; line-height: 1.25; font-weight: 650; border: 1px solid var(--chat-line); border-radius: 5px; background: #fff; }
.ai-chat-suggestions button:hover { color: var(--chat-blue); border-color: #a9b9e5; background: var(--chat-blue-soft); }
.ai-chat-suggestions button i { flex: 0 0 auto; color: var(--chat-blue); }

.ai-chat-panel:has(.ai-source-drawer[open]) .ai-chat-messages { min-height: 60px; flex-basis: 60px; }
.ai-chat-panel:has(.ai-source-drawer[open]) .ai-chat-suggestions { display: none; }

.ai-chat-form { min-height: 104px; display: flex; flex-direction: column; gap: 6px; margin: 6px 14px 0; padding: 10px; border: 1px solid #c8ced7; border-radius: 7px; background: #fff; box-shadow: 0 4px 16px rgba(25, 32, 42, .08); }
.ai-chat-form:focus-within { border-color: var(--chat-blue); box-shadow: 0 0 0 3px rgba(36, 94, 234, .1), 0 4px 16px rgba(25, 32, 42, .08); }
#ai-chat-input { width: 100%; min-width: 0; min-height: 52px; max-height: 120px; flex: 1 1 auto; resize: none; padding: 1px 2px; color: #202832; font-size: 12px; line-height: 1.5; border: 0; outline: 0; background: transparent; }
#ai-chat-input::placeholder { color: #8a929d; }
.ai-chat-form-footer { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-chat-form-footer > span { color: #6c7580; font-size: 9px; }
.ai-chat-form-footer > span i { margin-right: 4px; color: var(--chat-green); }
#ai-chat-send { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; padding: 0; color: #fff; border: 0; border-radius: 50%; background: var(--chat-blue); }
#ai-chat-send:hover { background: var(--chat-blue-dark); }
#ai-chat-send:disabled { cursor: wait; opacity: .55; }
#ai-chat-send.is-running { cursor: pointer; color: #fff; background: #17191c; }
#ai-chat-send.is-running:hover { background: #2d3034; }
.ai-chat-status { min-height: 24px; margin: 0; padding: 5px 16px 7px; color: #727b86; font-size: 9px; line-height: 1.4; }
.ai-chat-status.error { color: #bd382e; }
.ai-chat-status.success { color: #11735d; }

@media (min-width: 993px) {
  .content-container:has(#ai-tab.active) > .edit-area { flex: 0 0 clamp(370px, 32vw, 430px); }
  .content-container:has(#ai-tab.active) > .canvas-area { min-width: 0; }
}

@media (max-width: 992px) {
  #ai-tab { min-height: 640px; }
  .ai-chat-panel { min-height: 640px; }
}

@media (max-width: 480px) {
  .ai-chat-header { padding-left: 12px; padding-right: 12px; }
  .ai-chat-header h2 { font-size: 15px; }
  .ai-chat-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .ai-credit-summary, .ai-source-drawer, .ai-chat-form { margin-left: 10px; margin-right: 10px; }
  .ai-chat-messages { padding-left: 10px; padding-right: 10px; }
  .ai-chat-suggestions { padding-left: 10px; padding-right: 10px; }
  .ai-controls-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-thinking-dot { animation: none; opacity: .55; }
}