goose/ui/desktop/src/styles/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Cash Sans */

@font-face {
  font-family: 'Cash Sans';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
      format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cash Sans';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Cash Sans Mono';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
      format('woff');
  font-weight: 400;
  font-style: normal;
}

@layer base {
  :root {
    --spring-easing: linear(
      0,
      0.009,
      0.035 2.1%,
      0.141,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.017,
      1.077,
      1.121,
      1.149 24.3%,
      1.159,
      1.163,
      1.161,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.991,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1.004 83.8%,
      1
    );
    --spring-duration: 1.333s;

    /* custom slate */
    --slate: #393838;

    /* block */
    --block-teal: #13bbaf;
    --block-orange: #ff4f00;

    /* start arcade colors */
    --constant-white: #ffffff;
    --constant-black: #000000;
    --grey-10: #101010;
    --grey-20: #1e1e1e;
    --grey-50: #666666;
    --grey-60: #959595;
    --grey-80: #cccccc;
    --grey-85: #dadada;
    --grey-90: #e8e8e8;
    --grey-95: #f0f0f0;
    --dark-grey-15: #1a1a1a;
    --dark-grey-25: #232323;
    --dark-grey-30: #2a2a2a;
    --dark-grey-40: #333333;
    --dark-grey-45: #595959;
    --dark-grey-60: #878787;
    --dark-grey-90: #e1e1e1;

    --background-app: var(--constant-white);
    --background-prominent: var(--grey-80);
    --background-standard: var(--grey-90);
    --background-subtle: var(--grey-95);
    --background-app-inverse: var(--constant-black);
    --background-subtle-inverse: var(--dark-grey-15);
    --background-standard-inverse: var(--dark-grey-25);
    --background-prominent-inverse: var(--dark-grey-40);

    --border-divider: var(--grey-90);
    --border-inverse: var(--constant-white);
    --border-prominent: var(--grey-10);
    --border-standard: var(--grey-60);
    --border-subtle: var(--grey-90);

    --icon-disabled: var(--grey-60);
    --icon-extra-subtle: var(--grey-60);
    --icon-inverse: var(--constant-white);
    --icon-prominent: var(--grey-10);
    --icon-standard: var(--grey-20);
    --icon-subtle: var(--grey-50);

    --text-placeholder: var(--grey-60);
    --text-prominent: var(--grey-10);
    --text-standard: var(--grey-20);
    --text-standard-inverse: var(--dark-grey-90);
    --text-subtle: var(--grey-50);
    --text-subtle-inverse: var(--dark-grey-60);
    --text-prominent-inverse: var(--constant-white);

    &.dark {
      --background-app: var(--constant-black);
      --background-prominent: var(--dark-grey-40);
      --background-standard: var(--dark-grey-25);
      --background-subtle: var(--dark-grey-15);
      --background-app-inverse: var(--constant-white);
      --background-subtle-inverse: var(--grey-95);
      --background-standard-inverse: var(--grey-90);
      --background-prominent-inverse: var(--grey-80);

      --border-divider: var(--dark-grey-25);
      --border-inverse: var(--constant-black);
      --border-prominent: var(--constant-white);
      --border-standard: var(--dark-grey-45);
      --border-subtle: var(--dark-grey-25);

      --icon-disabled: var(--dark-grey-45);
      --icon-extra-subtle: var(--dark-grey-45);
      --icon-inverse: var(--constant-black);
      --icon-prominent: var(--constant-white);
      --icon-standard: var(--dark-grey-90);
      --icon-subtle: var(--dark-grey-60);

      --text-placeholder: var(--dark-grey-45);
      --text-prominent: var(--constant-white);
      --text-standard: var(--dark-grey-90);
      --text-standard-inverse: var(--grey-20);
      --text-subtle: var(--dark-grey-60);
      --text-subtle-inverse: var(--grey-50);
      --text-prominent-inverse: var(--grey-20);
    }
    /* end arcade colors */

    /* Force scrollbars to be visible */
    [data-radix-scroll-area-viewport] {
      scrollbar-width: auto !important;
      -ms-overflow-style: auto !important;
    }

    /* Override Radix UI ScrollArea styles */
    [data-radix-scroll-area-viewport] > div {
      display: block !important;
    }

    /* Native scrollbar styling */
    * {
      scrollbar-width: auto;
      scrollbar-color: var(--grey-80) transparent;
    }

    .dark * {
      scrollbar-color: var(--dark-grey-45) transparent;
    }

    /* Webkit scrollbar styles */
    ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 12px; /* Increased from 8px */
      height: 12px;
      background-color: transparent;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 0;
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--grey-80);
      border: 3px solid transparent; /* Creates padding effect */
      border-radius: 8px;
      background-clip: padding-box;
      min-height: 40px; /* Minimum height of thumb */
    }

    .dark ::-webkit-scrollbar-thumb {
      background-color: var(--dark-grey-45);
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--grey-60);
      border: 2px solid transparent; /* Slightly less padding on hover */
    }

    .dark ::-webkit-scrollbar-thumb:hover {
      background-color: var(--dark-grey-60);
    }

    /* Ensure the thumb is more prominent when active */
    ::-webkit-scrollbar-thumb:active {
      background-color: var(--grey-50);
      border: 2px solid transparent;
    }

    .dark ::-webkit-scrollbar-thumb:active {
      background-color: var(--dark-grey-60);
    }

    ::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--grey-80);
      border-radius: 4px;
    }

    .dark ::-webkit-scrollbar-thumb {
      background: var(--dark-grey-45);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--grey-60);
    }

    .dark ::-webkit-scrollbar-thumb:hover {
      background: var(--dark-grey-60);
    }
  }

  body {
    background-color: var(--background-app);
  }
}

@layer components {
  /* Tailwind doesn't offer all three with break-words */
  .word-break {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .titlebar-drag-region {
    -webkit-app-region: drag;
    height: 32px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
  }

  .no-drag {
    -webkit-app-region: no-drag;
  }

  .bg-inline-code {
    border-radius: 4px;
    color: var(--grey-80);
    font-family: 'Cash Sans Mono', monospace;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .bg-inline-code:before {
    content: '';
  }

  pre:has(> code.bg-inline-code) {
    padding: 1em;
  }

  p > code.bg-inline-code {
    color: var(--block-orange);
    padding: 2px 4px;
  }

  .bg-inline-code:after {
    content: '';
  }

  .user-message p {
    margin-bottom: 0 !important;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
  }
}