:root {
  --assistant-width: 1400px;
  --assistant-sidebar: 238px;
}

* { box-sizing: border-box; }

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

.assistant-page {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #f5f7f8;
}

.assistant-app {
  width: min(var(--assistant-width), calc(100% - 40px));
  height: calc(100dvh - 60px);
  min-height: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--assistant-sidebar) minmax(0, 1fr);
  overflow: hidden;
  border-inline: 1px solid #e1e7ea;
  background: #fff;
}

.assistant-app.is-usage-view { grid-template-columns: 190px minmax(0, 1fr); }

.assistant-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fafbfc;
  border-right: 1px solid #e1e7ea;
}

.assistant-system-identity {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid #e6ebee;
}

.assistant-system-mark {
  width: 31px;
  height: 25px;
  flex: 0 0 auto;
  background: url("brand/brand-mark.svg") center / contain no-repeat;
}

.assistant-system-identity strong,
.assistant-system-identity small { display: block; }
.assistant-system-identity strong { color: #17374b; font-size: 14px; }
.assistant-system-identity small { margin-top: 3px; color: #83919a; font-size: 10px; letter-spacing: .01em; }

.assistant-section-nav {
  display: grid;
  gap: 5px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #e0e8ec;
}

.assistant-nav-eyebrow {
  padding: 2px 8px 4px;
  color: #9aa6ad;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.assistant-nav-button {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #526a78;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.assistant-nav-button:hover { background: #f3f7f8; border-color: #e2e9ec; }
.assistant-nav-button.is-active { background: #edf4f5; border-color: #d9e6e9; color: #0f5262; }
.assistant-nav-button span { width: 18px; color: #168191; font-size: 17px; text-align: center; }
.conversation-sidebar { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.conversation-sidebar[hidden] { display: none !important; }

.sidebar-heading {
  min-height: 80px;
  padding: 14px 12px 12px;
  border-bottom: 1px solid #e3eaee;
}

.sidebar-heading > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.sidebar-heading strong { color: #14344b; font-size: 14px; }
.sidebar-heading span { color: #7a8c98; font-size: 11px; }

.new-task-button {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cddce4;
  border-radius: 10px;
  background: #fff;
  color: #17394f;
  font-weight: 700;
  text-align: left;
  padding: 8px 12px;
  box-shadow: none;
}

.new-task-button:hover { border-color: #7bb8c5; background: #fafdfe; }

.task-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.task-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
  padding: 10px 8px 10px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #2f4657;
  text-align: left;
}

.task-item:hover { background: #fff; border-color: #e0e8ed; }
.task-item.is-active { background: #e9f2f5; border-color: #d3e4e9; color: #0f3a52; }

.task-select {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.task-title {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-time { display: block; margin-top: 3px; color: #82919b; font-size: 11px; }

.task-archive {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8797a2;
  font-size: 16px;
}

.task-archive:hover { background: #fff; color: #a14b43; }
.task-list-status { padding: 18px 10px; color: #81909b; font-size: 12px; text-align: center; }

.assistant-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgb(255 255 255 / 96%);
}

.assistant-chat-view { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; }
.assistant-chat-view[hidden], .usage-view[hidden] { display: none !important; }

.assistant-chat-header {
  min-height: 72px;
  padding: 10px clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #e1e8ec;
}

.assistant-system-path { display: block; margin-bottom: 3px; color: #91a0a8; font-size: 9px; font-weight: 700; letter-spacing: .08em; }

.assistant-chat-header h1 { margin: 0; color: #102f45; font-size: 17px; line-height: 1.2; }
.assistant-chat-header h1 span { margin-left: 5px; color: #718693; font-size: 12px; font-weight: 600; }
.assistant-chat-header p { margin: 5px 0 0; color: #6a7d89; font-size: 12px; }
.assistant-scope { color: #70858f; font-size: 10px; white-space: nowrap; }

.conversation {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 28px clamp(20px, 4vw, 58px) 20px;
}

.assistant-empty {
  max-width: 760px;
  margin: clamp(36px, 10vh, 104px) auto 0;
  text-align: center;
}

.empty-mark {
  width: 58px;
  height: 46px;
  display: block;
  margin: 0 auto 17px;
  background: url("brand/brand-mark.svg") center / contain no-repeat;
}

.assistant-empty h2 { margin: 0; color: #15364d; font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.assistant-empty > p { max-width: 650px; margin: 13px auto 22px; color: #637784; font-size: 14px; line-height: 1.75; }

.prompt-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.prompt-examples[hidden] { display: none !important; }

.prompt-examples button {
  min-height: 66px;
  padding: 13px 14px;
  border: 1px solid #dce7ec;
  border-radius: 10px;
  background: #fcfdfd;
  color: #365263;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

.prompt-examples button:hover { border-color: #87bdc8; background: #f7fbfc; color: #0f5c68; }
.message-stream { max-width: 860px; margin: 0 auto; }
.message-row { display: flex; width: 100%; margin: 0 0 22px; }
.message-row.is-user { justify-content: flex-end; }
.message-row.is-assistant { justify-content: flex-start; }

.user-message {
  max-width: min(76%, 700px);
  padding: 11px 15px;
  border-radius: 16px 16px 4px 16px;
  background: #123c55;
  color: #fff;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-message { width: min(100%, 820px); color: #263d4d; }
.assistant-message-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #143c53; font-size: 12px; font-weight: 800; }
.assistant-message-head::before { content: ""; width: 24px; height: 19px; background: url("brand/brand-mark.svg") center / contain no-repeat; }

.assistant-answer {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.answer-intro { padding: 14px 16px; border: 1px solid #e0e9ec; border-radius: 11px; background: #f7fafb; }
.answer-intro strong { display: block; margin-bottom: 6px; color: #153b52; font-size: 13px; }
.answer-intro p, .answer-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer-intro p { color: #405c6c; font-size: 14px; line-height: 1.72; }
.answer-body { padding: 18px 2px 16px; color: #263e4d; font-size: 14px; line-height: 1.82; }
.answer-section { padding: 15px 2px; border-top: 1px solid #edf1f3; }
.answer-section + .answer-section { padding-top: 15px; }
.answer-section h3 { margin: 0 0 9px; color: #173b52; font-size: 13px; }
.answer-section ul { margin: 0; padding-left: 19px; }
.answer-section li { margin: 5px 0; color: #405766; font-size: 13px; line-height: 1.65; }

.evidence-list { display: grid; gap: 8px; }
.evidence-item { padding: 10px 12px; border: 1px solid #e2eaee; border-radius: 9px; background: #fafcfd; }
.evidence-item strong { display: block; color: #304d5e; font-size: 12px; }
.evidence-item span { display: block; margin-top: 4px; color: #71828d; font-size: 11px; }
.evidence-item p { margin: 7px 0 0; color: #536b79; font-size: 12px; line-height: 1.6; }

.supplier-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 5px 0 16px;
  padding: 13px 14px;
  border: 1px solid #efd7c4;
  border-radius: 10px;
  background: #fff8f2;
}

.supplier-handoff div { min-width: 0; }
.supplier-handoff strong { display: block; color: #7b461f; font-size: 13px; }
.supplier-handoff span { display: block; margin-top: 4px; color: #86664e; font-size: 12px; }
.supplier-handoff a { flex: 0 0 auto; padding: 8px 11px; border-radius: 8px; background: #d9742f; color: #fff; font-size: 12px; font-weight: 700; }
.answer-note { padding: 11px 2px; border-top: 1px solid #edf1f3; color: #84929a; font-size: 10px; }

.thinking-message, .error-message {
  padding: 13px 15px;
  border: 1px solid #dfe8ec;
  border-radius: 11px;
  color: #647985;
  background: #fafcfd;
  font-size: 13px;
}

.thinking-message::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #168191; box-shadow: 12px 0 #76b7bf, 24px 0 #c0dce0; animation: thinking 1.2s infinite ease-in-out; }
.error-message { border-color: #efd3d0; background: #fff8f7; color: #8c4b45; }
@keyframes thinking { 50% { opacity: .4; } }

.composer-region { padding: 10px clamp(20px, 4vw, 58px) 9px; border-top: 0; background: linear-gradient(180deg, rgb(255 255 255 / 65%), #fff 24%); }
.composer { max-width: 860px; margin: 0 auto; border: 1px solid #cedde3; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgb(22 56 75 / 7%); overflow: hidden; }
.composer:focus-within { border-color: #79b8c5; box-shadow: 0 0 0 3px rgb(13 138 154 / 7%), 0 7px 22px rgb(22 56 75 / 7%); }

.composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 180px;
  padding: 11px 14px 5px;
  border: 0;
  outline: 0;
  resize: vertical;
  color: #233d4d;
  background: transparent;
  font-size: 14px;
  line-height: 1.6;
}

.composer textarea::placeholder { color: #93a0a8; }
.composer-footer { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 7px 7px 10px; }
.composer-tools { min-width: 0; display: flex; align-items: center; gap: 10px; }
.composer-tools > span { color: #8998a1; font-size: 11px; }
.attachment-button { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: #54717f; font-size: 11px; }
.attachment-button[hidden] { display: none !important; }
.attachment-button:hover, .attachment-button.is-open { background: #edf5f7; color: #0f6170; }
.attachment-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: #0f6170; color: #fff; }
.send-button:hover { background: #0a5360; }
.send-button:disabled { background: #a7b9c0; cursor: wait; }
.send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assistant-disclaimer { max-width: 860px; margin: 6px auto 0; color: #929da3; font-size: 9px; text-align: center; }

.attachment-panel {
  max-width: 860px;
  max-height: min(42vh, 360px);
  margin: 0 auto 10px;
  padding: 13px;
  overflow-y: auto;
  border: 1px solid #d7e4e9;
  border-radius: 13px;
  background: #f9fbfc;
  box-shadow: 0 10px 28px rgb(15 58 82 / 8%);
}

.attachment-panel-head, .artifact-area { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.attachment-panel-head strong, .artifact-area strong { display: block; color: #173b52; font-size: 13px; }
.attachment-panel-head span, .artifact-area span { display: block; margin-top: 3px; color: #71838e; font-size: 11px; line-height: 1.5; }
.attachment-panel-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.attachment-panel-actions #closeAttachmentPanel { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #728590; font-size: 20px; }
.attachment-panel-actions #closeAttachmentPanel:hover { background: #e8f0f3; }
.attachment-status { min-height: 0; margin: 8px 0 0; color: #617984; font-size: 11px; }
.attachment-status:empty { display: none; }
.attachment-list, .artifact-list { display: grid; gap: 7px; margin-top: 9px; }
.attachment-item, .artifact-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border: 1px solid #e0e8ec; border-radius: 9px; background: #fff; }
.attachment-main { min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.attachment-main input { margin-top: 3px; accent-color: #0f7584; }
.attachment-main strong, .artifact-item strong { display: block; overflow: hidden; color: #2b4657; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-main small, .artifact-item small { display: block; margin-top: 3px; color: #7d8d96; font-size: 10px; }
.attachment-actions { display: flex; align-items: center; gap: 5px; }
.small-action { min-height: 29px; padding: 5px 9px; border: 1px solid #cfdee4; border-radius: 7px; background: #fff; color: #436574; font-size: 11px; white-space: nowrap; }
.small-action:hover { border-color: #83b9c4; color: #0c6573; }
.small-action.primary { border-color: #0f7584; background: #0f7584; color: #fff; }
.small-action.danger:hover { border-color: #dbada8; color: #9a4038; }
.artifact-area { margin-top: 11px; padding-top: 11px; border-top: 1px solid #e1e9ed; }
.artifact-area[hidden], .artifact-list[hidden] { display: none !important; }
.attachment-empty { padding: 10px; color: #80909a; font-size: 11px; text-align: center; }

.consent-dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 14px; color: #304957; box-shadow: 0 24px 70px rgb(7 34 51 / 28%); }
.consent-dialog::backdrop { background: rgb(8 30 44 / 45%); }
.consent-dialog form { padding: 24px; }
.consent-dialog h2 { margin: 0 0 12px; color: #15394f; font-size: 19px; }
.consent-dialog p { margin: 9px 0; color: #5b707c; font-size: 13px; line-height: 1.7; }
.consent-check { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0; padding: 11px; border-radius: 9px; background: #fff6ee; color: #754d30; font-size: 12px; line-height: 1.6; }
.consent-check input { margin-top: 3px; accent-color: #c86b2b; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; }
.consent-actions button:disabled { opacity: .45; cursor: not-allowed; }

.usage-view { min-height: 0; flex: 1; overflow-y: auto; padding: 24px clamp(18px, 3vw, 38px) 36px; background: #f7f9fa; }
.usage-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.usage-header h1 { margin: 0; color: #14364c; font-size: 24px; }
.usage-header p { max-width: 760px; margin: 7px 0 0; color: #6d808b; font-size: 12px; line-height: 1.6; }
.usage-range, .trend-metric { display: flex; padding: 3px; border-radius: 8px; background: #e8eef1; }
.usage-range button, .trend-metric button { min-height: 29px; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: #687c88; font-size: 11px; }
.usage-range button.is-active, .trend-metric button.is-active { background: #fff; color: #173e55; box-shadow: 0 2px 6px rgb(25 59 80 / 9%); }
.usage-status { margin: 30px 0; color: #74858f; font-size: 13px; text-align: center; }
.usage-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.usage-cards article { min-height: 142px; padding: 19px; border: 1px solid #dce5e9; border-top: 3px solid #61a7b4; border-radius: 12px; background: #fff; }
.usage-cards article:nth-child(2) { border-top-color: #55b98f; }
.usage-cards article:nth-child(3) { border-top-color: #e3a04a; }
.usage-cards article:nth-child(4) { border-top-color: #8f78c5; }
.usage-cards span { display: block; color: #607581; font-size: 12px; }
.usage-cards strong { display: block; margin: 13px 0 8px; color: #152f41; font-size: clamp(22px, 2.3vw, 30px); line-height: 1; }
.usage-cards small { color: #8998a1; font-size: 10px; line-height: 1.5; }
.usage-panel { margin-top: 15px; padding: 20px; border: 1px solid #dce5e9; border-radius: 12px; background: #fff; }
.usage-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.usage-panel-head h2 { margin: 0; color: #1b3a4f; font-size: 16px; }
.usage-panel-head p { margin: 5px 0 0; color: #7a8b95; font-size: 11px; }
.trend-chart { min-height: 190px; display: flex; align-items: flex-end; gap: 4px; padding: 18px 4px 25px; border-bottom: 1px solid #e6ecef; }
.trend-bar { position: relative; min-width: 4px; flex: 1; height: var(--bar-height, 2%); min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #4b9dac, #a7d2d8); }
.trend-bar:hover { background: #167c8a; }
.trend-bar span { position: absolute; left: 50%; bottom: -20px; color: #8a99a1; font-size: 8px; transform: translateX(-50%); white-space: nowrap; }
.usage-table-wrap { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.usage-table th, .usage-table td { padding: 10px 8px; border-bottom: 1px solid #edf1f3; color: #526a78; text-align: left; white-space: nowrap; }
.usage-table th { color: #778993; font-size: 10px; font-weight: 700; }
.usage-table td:nth-child(3) { max-width: 300px; overflow: hidden; color: #294757; text-overflow: ellipsis; }
.run-status { display: inline-block; padding: 3px 7px; border-radius: 999px; background: #edf6f1; color: #317451; font-size: 10px; }
.run-status.failed, .run-status.timeout, .run-status.quota_exceeded { background: #fff0ef; color: #9b4841; }
.usage-empty { margin: 0; padding: 24px 0; color: #83939c; font-size: 12px; text-align: center; }

@media (max-width: 900px) {
  .assistant-page { overflow: auto; }
  .assistant-app { width: 100%; height: calc(100dvh - 60px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); border: 0; }
  .assistant-app.is-usage-view { grid-template-columns: 1fr; }
  .assistant-sidebar { max-height: 190px; border-right: 0; border-bottom: 1px solid #dce6eb; }
  .assistant-system-identity, .assistant-nav-eyebrow { display: none; }
  .assistant-section-nav { display: flex; padding: 6px 10px; }
  .assistant-nav-button { min-height: 32px; padding-block: 5px; }
  .conversation-sidebar { min-height: 0; }
  .sidebar-heading { min-height: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; }
  .sidebar-heading > div { margin: 0; display: block; }
  .sidebar-heading span { display: block; margin-top: 2px; }
  .new-task-button { width: auto; min-height: 34px; white-space: nowrap; }
  .task-list { display: flex; gap: 7px; overflow-x: auto; padding: 7px 12px; }
  .task-item { flex: 0 0 220px; margin: 0; }
  .assistant-chat-header { min-height: 58px; padding: 9px 16px; }
  .assistant-chat-header p, .assistant-scope { display: none; }
  .conversation { padding: 18px 14px 14px; }
  .composer-region { padding: 10px 12px 8px; }
  .usage-view { padding: 18px 14px 28px; }
  .usage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .prompt-examples { grid-template-columns: 1fr; }
  .assistant-empty { margin-top: 20px; }
  .assistant-empty h2 { font-size: 23px; }
  .user-message { max-width: 88%; }
  .answer-intro, .answer-body { padding: 14px; }
  .answer-section { padding-inline: 14px; }
  .supplier-handoff { margin-inline: 14px; align-items: flex-start; flex-direction: column; }
  .composer-tools > span { display: none; }
  .composer-footer { justify-content: flex-end; }
  .composer-tools { margin-right: auto; }
  .attachment-panel { max-height: 48vh; padding: 11px; }
  .attachment-item, .artifact-item { grid-template-columns: 1fr; }
  .attachment-actions { justify-content: flex-end; }
  .artifact-area { align-items: flex-start; }
  .usage-header, .usage-panel-head { align-items: flex-start; flex-direction: column; }
  .usage-cards { grid-template-columns: 1fr; }
  .usage-cards article { min-height: 120px; }
  .trend-chart { min-height: 150px; }
}