:root {
    --plan-done: #188038;
    --chat-log-h: 192px;
  }

  :root.dark {
    --plan-done: #81c995;
  }

  .notebook {
    --nb-pad-top: 44px;
    --nb-pad-left: 70px;
    --nb-pad-right: 48px;
    --nb-pad-bottom: 52px;
    --nb-fade: 24px;
    --notebook-gap: 28px;
    width: calc(100% + var(--nb-pad-left) + var(--nb-pad-right));
    padding: var(--nb-pad-top) var(--nb-pad-right) var(--nb-pad-bottom) var(--nb-pad-left);
    margin-top: calc(0px - var(--nb-pad-top));
    margin-left: calc(0px - var(--nb-pad-left));
    margin-right: calc(0px - var(--nb-pad-right));
    margin-bottom: calc(-20px - var(--nb-pad-bottom));
    max-height: 384px;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0,
      #000 min(var(--nb-fade), var(--nb-clip, 0px)));
    mask-image: linear-gradient(to bottom, transparent 0,
      #000 min(var(--nb-fade), var(--nb-clip, 0px)));
  }
  .notebook::-webkit-scrollbar { display: none; }
  .notebook.active { margin-bottom: calc(0px - var(--nb-pad-bottom)); }

  .chat-input { position: relative; }
  .slash-menu {
    position: absolute;
    left: 8px;
    bottom: calc(100% + 8px);
    z-index: 20;
    min-width: 264px;
    max-width: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--toolbar-border);
    border-radius: 14px;
    box-shadow: var(--toolbar-shadow);
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transform-origin: 12% 100%;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease,
                background-color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease;
  }
  .slash-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .slash-menu button {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    transition: background-color 0.2s ease;
  }
  .slash-menu button:hover,
  .slash-menu button.hover,
  .slash-menu button.active { background: var(--surface-hover); }
  .slash-menu button.pressed { background: var(--surface-pressed); }
  .slash-menu button .msym {
    font-size: 20px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
  }
  .slash-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .slash-label {
    font: 500 14px "Google Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    transition: color 0.3s ease;
  }
  .slash-desc {
    font: 400 12.5px "Google Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }

  .plan-card {
    margin-top: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .plan-card.show {
    opacity: 1;
    transform: none;
  }

  .plan-head {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    margin-bottom: 2px;
    font: 500 13.5px "Google Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--text-secondary);
    transition: color 0.3s ease;
  }
  .plan-card.done .plan-head { display: flex; }
  .plan-head .msym {
    font-size: 18px;
    transform-origin: 50% 50%;
    transition: color 0.3s ease;
  }
  .plan-card.done .plan-head .msym {
    color: var(--plan-done);
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
  }

  .plan-steps {
    display: flex;
    flex-direction: column;
  }
  .plan-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .plan-step.show {
    opacity: 1;
    transform: none;
  }
  .plan-step-icon {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
    transform-origin: 50% 50%;
    transition: color 0.3s ease;
  }
  .plan-step[data-status="todo"] .plan-step-icon { font-size: 8px; }
  .plan-step[data-status="active"] .plan-step-icon {
    color: var(--gemini);
    animation: spin 1s linear infinite;
  }
  .plan-step[data-status="done"] .plan-step-icon {
    color: var(--plan-done);
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
  }
  .plan-step-label {
    font: 500 13.5px "Google Sans", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: var(--text);
    transition: color 0.3s ease;
  }

  .chat-actions button.primary {
    background: var(--gemini);
    color: #fff;
  }
  .chat-actions button.primary:hover,
  .chat-actions button.primary.hover {
    background: var(--gemini);
    filter: brightness(1.08);
  }
  .chat-actions button.primary.pressed {
    background: var(--gemini);
    filter: brightness(0.9);
  }

  .chat-chip--mode .chat-chip-label {
    font-family: "Google Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
  }

  .out-charts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  .chart {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 300px;
    height: auto;
    background: #fff;
    border: 1px solid rgba(32, 33, 36, 0.10);
    border-radius: 10px;
  }
  .chart text { font-family: "Google Sans", "Helvetica Neue", Arial, sans-serif; }
  .chart .bar {
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .cell-output.drawn .bar { transform: scaleY(1); }
  .chart .bar-value {
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .cell-output.drawn .bar-value { opacity: 1; }

  body.is-card { --chat-log-h: 148px; }
  body.is-card .notebook { max-height: min(384px, 38vh); }

  @media (max-width: 50rem) {
    .notebook {
      --nb-pad-left: 12px;
      --nb-pad-right: 12px;
    }
    .slash-menu { min-width: 220px; }
  }

  @media (max-width: 25rem) {
    .slash-desc { display: none; }
    .slash-menu { min-width: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .slash-menu, .slash-menu button, .slash-menu button .msym,
    .slash-label, .slash-desc,
    .plan-card, .plan-head, .plan-head .msym,
    .plan-step, .plan-step-icon, .plan-step-label,
    .chat-actions button.primary,
    .chat-log, .chart .bar, .chart .bar-value {
      transition-duration: 0s !important;
    }
  }