/* Native ChatWorkspaceView palette and artwork, scoped to the main chat. */
#view-agent {
  --chat-ink: #f4fff6;
  --chat-muted: #b5c8bc;
  --chat-mint: #8ee89d;
  --chat-line: rgba(176, 239, 190, .18);
  --chat-strong-line: rgba(176, 239, 190, .32);
  color: var(--chat-ink);
}
#view-agent > .workspace-head { display: none; }
#view-agent .chat-workspace {
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 0;
  height: calc(100dvh - 64px);
  min-height: 420px;
  border: 1px solid var(--chat-line);
  border-radius: 8px;
  background: #02130e;
}
#view-agent .chat-workspace.is-sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
#view-agent .chat-sidebar {
  height: 100%; min-height: 0; max-height: none;
  border: 0; border-right: 1px solid var(--chat-line);
  border-radius: 8px 0 0 8px;
  background: #031b14;
}
#view-agent .chatgpt-panel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  border: 0; border-radius: 0 8px 8px 0;
  background: #02130e; color: var(--chat-ink);
}
/* Retain all three symbols from the portrait artwork on wide screens. */
#view-agent .chatgpt-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, #02130e, transparent 55%), linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(2, 19, 14, .76) 55%, rgba(2, 19, 14, .93)), url("chat-background.png");
  background-position: right bottom;
  background-size: auto, auto, auto 100%;
  background-repeat: no-repeat;
}
#view-agent .chatgpt-panel > .panel-head {
  display: flex; flex: 0 0 auto; align-items: center; gap: 12px;
  min-height: 68px; margin: 0; padding: 8px 14px;
  border-bottom: 1px solid var(--chat-line); background: rgba(0, 0, 0, .34);
}
#view-agent .chatgpt-panel > .panel-head > div { flex: 1; min-width: 0; }
#view-agent .chatgpt-panel > .panel-head h2 {
  overflow: hidden; margin: 0; color: var(--chat-ink);
  font-size: 17px; line-height: 1.4; letter-spacing: 0;
  text-overflow: ellipsis; white-space: nowrap;
}
#view-agent .chatgpt-panel > .panel-head p { display: block; margin: 1px 0 0; color: var(--chat-muted); font-size: 12px; line-height: 1.4; }
#view-agent .chat-history-toggle {
  display: inline-grid; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px;
  padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--chat-ink);
}
#view-agent .chat-header-new { margin-left: auto; }
#view-agent .chat-header-new svg { width: 22px; height: 22px; }
#view-agent .chat-history-toggle:hover { background: rgba(142, 232, 157, .1); }
#view-agent .chatgpt-panel .composer {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 0;
  min-height: 0; padding: 0 18px 10px; background: transparent;
}
#view-agent .chat-messages {
  flex: 1 1 0; width: min(100%, 920px); min-height: 0; max-height: none;
  margin: 0 auto; padding: 24px 16px; gap: 14px;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(176, 239, 190, .25) transparent;
  background: transparent;
}
#view-agent .chat-message {
  max-width: min(84%, 740px); min-width: 0; padding: 12px 16px;
  border: 1px solid var(--chat-line); border-radius: 17px;
  background: rgba(0, 0, 0, .72); box-shadow: none; color: var(--chat-ink);
}
#view-agent .chat-message.user { margin-left: auto; border-color: rgba(142, 232, 157, .5); background: rgba(33, 87, 50, .9); }
#view-agent .chat-message > strong { color: var(--chat-muted); font-size: 11px; letter-spacing: 0; }
#view-agent .chat-message-content { color: var(--chat-ink); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
#view-agent .chat-message-content :is(p, li, span, .chat-email-text) { font-size: inherit; line-height: inherit; color: inherit; }
#view-agent .chat-message-content strong { color: inherit; }
#view-agent .chat-message-content a { color: #a5e3ff; }
#view-agent .agent-empty-state {
  align-self: center; justify-content: center; width: min(100%, 620px); min-height: 100%;
  margin: auto; padding: 28px 0; gap: 16px; background: transparent; border: 0; box-shadow: none;
}
#view-agent .agent-empty-orb { width: 108px; height: 108px; }
#view-agent .agent-empty-state h3 { font-size: 26px; line-height: 1.25; letter-spacing: 0; }
#view-agent .agent-empty-state p { color: var(--chat-muted); font-size: 14px; line-height: 1.5; }
#view-agent .agent-suggestion-grid { margin-top: 8px; }
#view-agent .agent-suggestion-grid button {
  padding: 10px 14px; border-color: var(--chat-line); background: rgba(0, 0, 0, .55);
  color: var(--chat-ink); font-size: 13px; line-height: 1.4; font-weight: 500;
}
#view-agent .chat-composer-row {
  flex: 0 0 auto; grid-template-columns: 44px minmax(0, 1fr) repeat(3, 44px); grid-template-rows: auto; gap: 2px;
  width: min(100%, 860px); margin: 0 auto; padding: 6px;
  border: 1px solid var(--chat-strong-line); border-radius: 20px;
  background: rgba(0, 10, 7, .94); box-shadow: none;
}
#view-agent .chat-composer-row:focus-within { border-color: var(--chat-mint); }
#view-agent .chat-composer-row textarea {
  grid-column: 2; grid-row: 1;
  min-height: 44px; max-height: 140px; padding: 12px 10px;
  border-radius: 0; background: transparent; box-shadow: none; color: var(--chat-ink);
  font-size: 16px; line-height: 1.4;
}
#view-agent .chat-composer-row button[type="submit"] {
  grid-column: 5; grid-row: 1;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: #55d977; color: #02130e; box-shadow: none;
}
#view-agent .chat-composer-tools { display: contents; }
#view-agent .chat-composer-tools .attachment-button { grid-column: 1; grid-row: 1; }
#view-agent .chat-composer-tools .mic-button { grid-column: 3; grid-row: 1; }
#view-agent .chat-composer-tools .composer-voice-button { grid-column: 4; grid-row: 1; margin: 0; }
#view-agent .composer-tool span { display: none; }
#view-agent .composer-tool { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--chat-mint); }
#view-agent .composer-tool svg { width: 20px; height: 20px; }
#view-agent .composer-tool:hover { background: rgba(142, 232, 157, .12); }
#view-agent .composer-tool.is-recording { color: #ffb09b; background: rgba(255, 111, 76, .12); }
#view-agent .file-drop-inline-hint { display: none; }
#view-agent .dictation-status { flex: 0 0 auto; min-height: 16px; margin: 4px auto 0; font-size: 11px; color: var(--chat-muted); }
#view-agent .chat-attachment-tray { flex: 0 0 auto; max-height: 110px; overflow: auto; }
#view-agent :is(button, a, label[for]):focus-visible { outline: 2px solid var(--chat-mint); outline-offset: 3px; }
#view-agent .chatgpt-panel[data-active-agent="voice"] .chat-messages { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; }
#view-agent .chatgpt-panel[data-active-agent="voice"] .composer { padding: 0; }
#view-agent .chatgpt-panel[data-active-agent="voice"] .chat-header-new { display: none; }
@media (max-width: 1179px) {
  #view-agent .chat-workspace { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 106px); }
  #view-agent .chat-sidebar { z-index: 30; max-height: none; border: 1px solid var(--chat-strong-line); border-radius: 8px; }
  #view-agent .chatgpt-panel,
  #view-agent .chat-workspace.is-sidebar-hidden .chatgpt-panel { border: 0; border-radius: 8px; }
}
@media (max-width: 720px) {
  .app-shell.is-authenticated > .workspace:has(#view-agent.is-active) { padding: max(58px, calc(env(safe-area-inset-top) + 54px)) 0 0; }
  #view-agent { padding: 0; }
  #view-agent .chat-workspace { height: calc(100dvh - max(58px, calc(env(safe-area-inset-top) + 54px))); min-height: 320px; border: 0; border-radius: 0; }
  #view-agent .chatgpt-panel,
  #view-agent .chat-workspace.is-sidebar-hidden .chatgpt-panel { border-radius: 0; }
  #view-agent .chatgpt-panel > .panel-head { min-height: 62px; padding: 7px 8px; gap: 6px; }
  #view-agent .chatgpt-panel > .panel-head h2 { font-size: 16px; }
  #view-agent .chatgpt-panel > .panel-head p { font-size: 11px; }
  #view-agent .chatgpt-panel .composer { padding: 0 10px max(8px, env(safe-area-inset-bottom)); }
  #view-agent .chat-messages { padding: 18px 0; }
  #view-agent .chat-message { max-width: 90%; padding: 10px 13px; }
  #view-agent .chat-message-content { line-height: 1.5; }
  #view-agent .agent-empty-state h3 { font-size: 23px; }
  #view-agent .agent-empty-state p { max-width: 300px; }
  #view-agent .agent-empty-orb { width: 96px; height: 96px; }
  #view-agent .agent-suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-agent .agent-suggestion-grid button { min-height: 52px; font-size: 12px; padding: 8px; }
  #view-agent .composer-tool { width: 44px; padding: 0; }
  #view-agent .chat-sidebar { top: max(58px, calc(env(safe-area-inset-top) + 54px)); bottom: env(safe-area-inset-bottom); height: auto; }
}
@media (max-height: 620px) {
  #view-agent .chat-workspace { min-height: 0; }
  #view-agent .agent-empty-state { min-height: 0; }
  #view-agent .agent-voice-core { min-width: 0; min-height: 0; width: min(240px, 48dvh); }
  #view-agent .agent-voice-core-orb { width: 100%; height: 100%; }
}