:root {
      --ink: #0B0E1A;
      --panel: #121729;
      --panel2: #181E36;
      --line: #262D4D;

      --paper: #E8EAF6;
      --dim: #9AA1C4;
      --faint: #5A6190;

      --ind: #8B93F8;
      --ind-deep: #4A54D8;
      --ind-dark: #2A2F7A;

      --amber: #E8B44A;
      --pos: #5FD3A5;
      --neg: #E8706E;

      --disp: 'Instrument Sans', system-ui, sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    /* @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
      }
    } */

    body {
      background: var(--ink);
      color: var(--paper);
      font-family: var(--disp);
      font-size: 16px;
      line-height: 1.55;
      overflow: hidden;
    }

    button {
      font-family: var(--disp);
    }

    button:focus-visible,
    textarea:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 2px solid var(--ind);
      outline-offset: 2px;
      outline: none;
    }

    /* ================= SHELL ================= */

    .shell {
      display: grid;
      grid-template-columns: 264px 1fr;
      height: 100vh;
    }

    @media(max-width:820px) {
      .shell {
        grid-template-columns: 1fr;
      }

      .rail {
        display: none;
      }

      .shell.rail-open .rail {
        display: flex;
        position: fixed;
        inset: 0 25% 0 0;
        z-index: 60;
        box-shadow: 8px 0 40px rgba(0, 0, 0, .5);
      }
    }

    .rail {
      background: var(--panel);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      padding: 18px 14px;
      overflow: auto;
    }

    .mark {
      display: flex;
      gap: 4px;
      align-items: flex-end;
    }

    .mark i {
      display: block;
      width: 8px;
      border-radius: 2px;
    }

    .mark i:nth-child(1) {
      height: 22px;
      background: var(--ind);
    }

    .mark i:nth-child(2) {
      height: 30px;
      background: var(--ind-deep);
    }

    .mark i:nth-child(3) {
      height: 18px;
      background: var(--ind);
    }

    .mark i:nth-child(4) {
      height: 26px;
      background: var(--ind-deep);
    }

    .mark i:nth-child(5) {
      height: 14px;
      background: var(--ind);
    }

    .brandrow {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 8px 16px;
      cursor: pointer;
    }

    .wordmark {
      font-weight: 700;
      letter-spacing: .32em;
      font-size: 13px;
      text-transform: uppercase;
    }

    .newchat {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--paper);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .newchat:hover {
      border-color: var(--ind-deep);
    }

    .newchat .plus {
      color: var(--ind);
      font-size: 17px;
      line-height: 1;
    }

    .grp {
      font-size: 10.5px;
      color: var(--faint);
      letter-spacing: .22em;
      text-transform: uppercase;
      margin: 20px 0 6px 10px;
      font-family: var(--mono);
    }

    .rail-item {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      border-left: 2px solid transparent;
      color: var(--dim);
      font-size: 13.5px;
      padding: 8px 10px;
      border-radius: 0 8px 8px 0;
      cursor: pointer;
    }

    .rail-item:hover {
      color: var(--paper);
      background: rgba(139, 147, 248, .06);
    }

    .rail-item.on {
      color: var(--paper);
      border-left-color: var(--ind);
      background: linear-gradient(90deg,
          rgba(74, 84, 216, .14),
          transparent);
    }

    .rail-item .dot {
      width: 7px;
      height: 7px;
      border-radius: 2px;
      flex: none;
    }

    .rail-item .lock {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--faint);
    }

    .recents {
      flex: 1;
      min-height: 40px;
    }

    .recent-item {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      color: var(--dim);
      font-size: 13px;
      padding: 7px 12px;
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .recent-item:hover {
      color: var(--paper);
      background: rgba(139, 147, 248, .06);
    }

    .recent-item.on {
      color: var(--paper);
      background: rgba(139, 147, 248, .10);
    }

    .recents .empty {
      font-size: 12px;
      color: var(--faint);
      padding: 6px 12px;
    }

    .account {
      border-top: 1px solid var(--line);
      padding-top: 12px;
      margin-top: 12px;
    }

    .acct-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      background: none;
      border: none;
      color: var(--paper);
      cursor: pointer;
      padding: 8px 10px;
      border-radius: 10px;
      text-align: left;
    }

    .acct-btn:hover {
      background: rgba(139, 147, 248, .07);
    }

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--ind-dark);
      color: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      flex: none;
    }

    .acct-meta {
      min-width: 0;
    }

    .acct-name {
      font-size: 13.5px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .acct-role {
      font-size: 11px;
      color: var(--faint);
      font-family: var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* ================= MAIN ================= */

    main {
      position: relative;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-bottom: 1px solid transparent;
      position: sticky;
      top: 0;
      background: linear-gradient(var(--ink),
          rgba(11, 14, 26, .85));
      z-index: 10;
    }

    .hamb {
      display: none;
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--paper);
      border-radius: 8px;
      padding: 7px 10px;
      cursor: pointer;
    }

    @media(max-width:820px) {
      .hamb {
        display: block;
      }
    }

    .scopechip {
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: .08em;
      color: var(--ind);
      border: 1px solid var(--ind-dark);
      border-radius: 99px;
      padding: 4px 12px;
      background: rgba(74, 84, 216, .10);
    }

    .topbar .spacer {
      flex: 1;
    }

    .signin-cta {
      background: var(--ind-deep);
      border: none;
      color: #fff;
      font-weight: 600;
      font-size: 13.5px;
      border-radius: 9px;
      padding: 8px 16px;
      cursor: pointer;
    }

    .signin-cta:hover {
      background: var(--ind);
    }

    /* ================= HOME ================= */

    .home {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 20px 60px;
    }

    .greet-mark {
      display: flex;
      gap: 5px;
      align-items: flex-end;
      margin-bottom: 22px;
    }

    .greet-mark i {
      display: block;
      width: 11px;
      border-radius: 3px;
      animation: breathe 3.4s ease-in-out infinite;
    }

    .greet-mark i:nth-child(1) {
      height: 30px;
      background: var(--ind);
    }

    .greet-mark i:nth-child(2) {
      height: 42px;
      background: var(--ind-deep);
      animation-delay: .25s;
    }

    .greet-mark i:nth-child(3) {
      height: 26px;
      background: var(--ind);
      animation-delay: .5s;
    }

    .greet-mark i:nth-child(4) {
      height: 36px;
      background: var(--ind-deep);
      animation-delay: .75s;
    }

    .greet-mark i:nth-child(5) {
      height: 20px;
      background: var(--ind);
      animation-delay: 1s;
    }

    @keyframes breathe {

      0%,
      100% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(1.18);
      }
    }

    .greeting {
      font-size: clamp(26px, 3.4vw, 38px);
      font-weight: 700;
      text-align: center;
    }

    .greetsub {
      color: var(--dim);
      font-size: 15px;
      margin-top: 8px;
      text-align: center;
      max-width: 52ch;
    }

    .composer {
      width: min(720px, 100%);
      margin-top: 30px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 14px 10px;
    }

    .composer:focus-within {
      border-color: var(--ind-deep);
      box-shadow: 0 0 0 3px rgba(74, 84, 216, .18);
    }

    .composer textarea {
      width: 100%;
      background: none;
      border: none;
      resize: none;
      color: var(--paper);
      font-family: var(--disp);
      font-size: 15.5px;
      line-height: 1.5;
      min-height: 52px;
      max-height: 200px;
    }

    .composer textarea::placeholder {
      color: var(--faint);
    }

    .composer-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }

    .suite-select {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 11.5px;
      border-radius: 8px;
      padding: 6px 9px;
      cursor: pointer;
    }

    .composer-row .spacer {
      flex: 1;
    }


    .ai-note {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--line);
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .03em;
        color: var(--faint);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .ai-note .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ind);
        flex: none;
    }

    .send {
      background: var(--ind-deep);
      border: none;
      color: #fff;
      border-radius: 10px;
      width: 38px;
      height: 34px;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .send:hover {
      background: var(--ind);
    }

    .send:disabled {
      background: var(--ind-dark);
      cursor: default;
      opacity: .6;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      justify-content: center;
      margin-top: 22px;
      max-width: 720px;
    }

    .chip {
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--dim);
      font-size: 13px;
      border-radius: 99px;
      padding: 8px 15px;
      cursor: pointer;
    }

    .chip:hover {
      color: var(--paper);
      border-color: var(--ind-deep);
    }

    /* ================= THREAD ================= */

    .thread {
      flex: 1;
      width: min(760px, 100%);
      margin: 0 auto;
      padding: 10px 20px 20px;
      display: none;
      flex-direction: column;
      gap: 16px;
    }

    .msg {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      width: 100%;
    }

    .msg .who {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12px;
      font-family: var(--mono);
    }

    .msg.user .who {
      background: var(--ind-dark);
      color: var(--paper);
    }

    .msg.ai .who {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--ind);
    }

    .msg .bubble {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 15px;
      font-size: 15px;
      max-width: 100%;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .msg.user .bubble {
      background: var(--panel2);
    }

    .msg.ai.thinking .bubble {
      color: var(--faint);
      font-family: var(--mono);
      font-size: 13px;
    }

    .thread-footer {
      width: min(760px, 100%);
      margin: 0 auto;
      padding: 0 20px 18px;
      display: none;
    }

    /* ================= SUITES ================= */

    .suitewrap {
      flex: 1;
      width: min(900px, 100%);
      margin: 0 auto;
      padding: 12px 22px 50px;
      display: none;
    }

    .suitehead {
      margin: 14px 0 6px;
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ind);
      letter-spacing: .24em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .suitehead h1 {
      font-size: clamp(26px, 3.4vw, 40px);
      font-weight: 700;
    }

    .suitehead p {
      color: var(--dim);
      margin-top: 10px;
      max-width: 64ch;
    }

    .cardgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 14px;
      margin-top: 26px;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      cursor: pointer;
      text-align: left;
      color: var(--paper);
    }

    .card:hover {
      border-color: var(--ind-deep);
      transform: translateY(-2px);
    }

    .card .dot {
      width: 9px;
      height: 9px;
      border-radius: 3px;
      display: inline-block;
      margin-bottom: 12px;
    }

    .card h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .card p {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.5;
    }

    .card .code {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--faint);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-top: 12px;
    }

    .suite-ask {
      margin-top: 30px;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
    }

    .suite-ask h3 {
      font-size: 15px;
      margin-bottom: 4px;
    }

    .suite-ask p {
      font-size: 13px;
      color: var(--dim);
      margin-bottom: 12px;
    }

    .suite-ask button {
      background: var(--ind-deep);
      border: none;
      color: #fff;
      font-weight: 600;
      font-size: 13.5px;
      border-radius: 9px;
      padding: 9px 16px;
      cursor: pointer;
    }

    /* ================= GATE ================= */

    .gate {
      flex: 1;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px;
      text-align: center;
    }

    .gate .gatebox {
      background: var(--panel);
      border: 1px solid var(--ind-dark);
      border-radius: 16px;
      padding: 36px 34px;
      max-width: 440px;
    }

    .gate h2 {
      font-size: 22px;
      margin: 14px 0 8px;
    }

    .gate p {
      color: var(--dim);
      font-size: 14px;
      line-height: 1.6;
    }

    .gate button {
      margin-top: 20px;
      background: var(--ind-deep);
      border: none;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      border-radius: 10px;
      padding: 11px 22px;
      cursor: pointer;
    }

    /* ================= MODAL ================= */

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(6, 8, 18, .72);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 80;
      padding: 20px;
    }

    .overlay.open {
      display: flex;
    }

    .modal {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px;
      width: min(420px, 100%);
    }

    .modal h2 {
      font-size: 20px;
    }

    .modal .note {
      font-size: 12.5px;
      color: var(--faint);
      margin-top: 6px;
      line-height: 1.5;
    }

    .field {
      margin-top: 16px;
    }

    .field label {
      display: block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 6px;
    }

    .field input,
    .field select {
      width: 100%;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 9px;
      color: var(--paper);
      font-size: 14.5px;
      padding: 10px 12px;
      font-family: var(--disp);
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 22px;
    }

    .modal-actions .primary {
      flex: 1;
      background: var(--ind-deep);
      border: none;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      border-radius: 10px;
      padding: 11px;
      cursor: pointer;
    }

    .modal-actions .primary:disabled {
      opacity: .65;
      cursor: default;
    }

    .modal-actions .ghost {
      background: none;
      border: 1px solid var(--line);
      color: var(--dim);
      border-radius: 10px;
      padding: 11px 16px;
      font-size: 14px;
      cursor: pointer;
    }

    /* ================= ERROR ================= */

    #errbar {
      position: fixed;
      left: 12px;
      bottom: 12px;
      right: 12px;
      z-index: 99;
      background: #2A1520;
      border: 1px solid var(--neg);
      color: #F4C9C8;
      border-radius: 10px;
      padding: 10px 14px;
      font-family: var(--mono);
      font-size: 12px;
      display: none;
    }

    .mic {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--dim);
      border-radius: 10px;
      width: 38px;
      height: 34px;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mic:hover {
      color: var(--paper);
      border-color: var(--ind-deep);
    }

    .mic.recording {
      background: var(--neg);
      border-color: var(--neg);
      color: #fff;
      animation: micPulse 1.2s ease-in-out infinite;
    }

    .mic:disabled {
      opacity: .6;
      cursor: default;
    }

    @keyframes micPulse {
      0%, 100% {
        opacity: 1;
      }

      50% {
        opacity: .55;
      }
    }


    @keyframes voiceBar {
      0%, 100% {
        height: 6px;
        opacity: .45;
      }

      50% {
        height: 24px;
        opacity: 1;
      }
    }

    .voice-bars {
      height: 34px;
      display: none;
      align-items: center;
      gap: 3px;
      padding: 0 4px;
    }

    .voice-bars.active {
      display: flex;
    }

    .voice-bars i {
      display: block;
      width: 3px;
      height: 8px;
      border-radius: 3px;
      background: var(--neg);
      animation: voiceBar .8s ease-in-out infinite;
    }

    .voice-bars i:nth-child(1) {
      animation-delay: 0s;
    }

    .voice-bars i:nth-child(2) {
      animation-delay: .15s;
    }

    .voice-bars i:nth-child(3) {
      animation-delay: .3s;
    }

    .voice-bars i:nth-child(4) {
      animation-delay: .45s;
    }

    .voice-bars i:nth-child(5) {
      animation-delay: .6s;
    }



    /* ================= CHAT-FIRST RESPONSIVE LAYOUT ================= */
    :root {
      --rail-width: 264px;
      --chat-width: 820px;
    }

    /* The conversation is the primary surface. The sidebar behaves like a drawer. */
    .shell {
      display: block;
      height: 100dvh;
    }

    main {
      width: 100%;
      height: 100dvh;
      min-width: 0;
    }

    .rail {
      position: fixed;
      inset: 0 auto 0 0;
      width: var(--rail-width);
      z-index: 70;
      transform: translateX(-100%);
      transition: transform .22s ease;
      box-shadow: 12px 0 36px rgba(0, 0, 0, .32);
    }

    .shell.rail-open .rail {
      display: flex;
      transform: translateX(0);
    }

    .rail-backdrop {
      position: fixed;
      inset: 0;
      z-index: 65;
      background: rgba(6, 8, 18, .55);
      opacity: 0;
      visibility: hidden;
      transition: opacity .22s ease, visibility .22s ease;
    }

    .shell.rail-open .rail-backdrop {
      visibility: visible;
    }

    .hamb {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      padding: 0;
      background: transparent;
      border-color: transparent;
      font-size: 17px;
    }

    .hamb:hover {
      background: var(--panel2);
      border-color: var(--line);
    }

    .topbar {
      min-height: 62px;
      padding: 10px 16px;
    }

    .home {
      padding-left: max(18px, env(safe-area-inset-left));
      padding-right: max(18px, env(safe-area-inset-right));
    }

    .thread,
    .thread-footer {
      width: min(var(--chat-width), 100%);
    }

    .thread {
      padding: 16px 24px 28px;
      gap: 22px;
    }

    .thread-footer {
      position: sticky;
      bottom: 0;
      z-index: 20;
      padding: 10px 24px max(18px, env(safe-area-inset-bottom));
      background: linear-gradient(0deg, var(--ink) 72%, rgba(11, 14, 26, 0));
    }

    .thread-footer .composer {
      margin-top: 0;
      width: 100%;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    }

    /* ChatGPT-like reading surface: less card chrome, more content focus. */
    .msg .bubble {
      border: 0;
      background: transparent;
      padding: 4px 2px;
      line-height: 1.65;
    }

    .msg.user {
      justify-content: flex-end;
    }

    .msg.user .who {
      display: none;
    }

    .msg.user .bubble {
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 10px 14px;
      /* max-width: min(78%, 620px); */
    }

    @media (min-width: 1100px) {
      /* On roomy screens the drawer can stay open without stealing focus. */
      .shell.rail-open main {
        margin-left: var(--rail-width);
        width: calc(100% - var(--rail-width));
      }

      .shell.rail-open .rail-backdrop {
        display: none;
      }
    }

    @media (max-width: 820px) {
      .shell {
        grid-template-columns: none;
      }

      .rail {
        display: flex;
        width: min(86vw, 310px);
        inset: 0 auto 0 0;
      }

      .shell.rail-open .rail {
        inset: 0 auto 0 0;
      }

      .topbar {
        padding: 8px 10px;
        min-height: 56px;
      }

      .scopechip {
        max-width: 48vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .signin-cta {
        padding: 7px 11px;
      }

      .home {
        justify-content: flex-start;
        padding-top: clamp(58px, 12vh, 110px);
        padding-bottom: 28px;
      }

      .greet-mark {
        margin-bottom: 14px;
        transform: scale(.84);
      }

      .greeting {
        font-size: clamp(24px, 7vw, 32px);
      }

      .greetsub {
        font-size: 14px;
      }

      .composer {
        margin-top: 22px;
        border-radius: 18px;
        padding: 12px 12px 9px;
      }

      .chips {
        gap: 7px;
        margin-top: 16px;
      }

      .chip {
        font-size: 12px;
        padding: 7px 11px;
      }

      .thread {
        padding: 12px 14px 22px;
        gap: 18px;
      }

      .thread-footer {
        padding: 8px 10px max(10px, env(safe-area-inset-bottom));
      }

      .msg .who {
        width: 27px;
        height: 27px;
      }

      .msg .bubble {
        font-size: 14.5px;
      }

      .msg.user .bubble {
        max-width: 88%;
      }

      .suitewrap {
        padding: 10px 15px 36px;
      }

      .cardgrid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .scopechip {
        font-size: 10px;
        padding: 4px 8px;
        max-width: 44vw;
      }

      .topbar .signin-cta {
        font-size: 12px;
      }

      .home {
        padding-left: 12px;
        padding-right: 12px;
      }

      .composer-row {
        gap: 6px;
      }

      .suite-select {
        max-width: 48vw;
      }

      .ai-note {
        font-size: 9.5px;
        line-height: 1.4;
      }
    }

    /* ================= RELATIONSHIPS ================= */

    .relationships-view,
    .relationship-view {
      display: none;
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: 34px 28px 60px;
    }

    .relationships-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 32px;
    }

    .relationships-head h1 {
      font-size: 30px;
      font-weight: 700;
    }

    .relationships-head .spacer {
      flex: 1;
    }

    .relationship-new {
      background: var(--paper);
      color: var(--ink);
      border: 0;
      padding: 10px 16px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .relationship-grid {
      display: grid;
      grid-template-columns:
        repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }

    .relationship-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 20px;
      color: var(--paper);
      cursor: pointer;
      min-height: 150px;
      text-align: left;
    }

    .relationship-card:hover {
      border-color: var(--ind-deep);
      transform: translateY(-2px);
    }

    .relationship-card h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .relationship-card p {
      color: var(--dim);
      font-size: 13px;
      line-height: 1.5;
    }

    .relationship-card .date {
      margin-top: 22px;
      color: var(--faint);
      font-size: 11px;
      font-family: var(--mono);
    }
    .field input,
    .field select,
    .field textarea {
      width: 100%;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 9px;
      color: var(--paper);
      font-size: 14.5px;
      padding: 10px 12px;
      font-family: var(--disp);
    }

    .field textarea {
      resize: vertical;
      min-height: 100px;
    }

    /* ================================================
      RELATIONSHIP WORKSPACE
    ================================================ */

    .relationship-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--faint);
      font-family: var(--mono);
      font-size: 11px;
      margin-bottom: 28px;
    }

    .relationship-breadcrumb button {
      background: none;
      border: 0;
      color: var(--dim);
      cursor: pointer;
      font-family: inherit;
    }

    .relationship-breadcrumb button:hover {
      color: var(--paper);
    }


    .relationship-workspace-head {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 30px;
    }

    .relationship-workspace-head h1 {
      font-size: 30px;
      line-height: 1.2;
    }

    .relationship-workspace-head p {
      color: var(--dim);
      font-size: 14px;
      margin-top: 8px;
    }

    .relationship-workspace-head .spacer {
      flex: 1;
    }

    .relationship-menu {
      width: 36px;
      height: 36px;
      background: none;
      border: 0;
      color: var(--dim);
      border-radius: 8px;
      cursor: pointer;
    }

    .relationship-menu:hover {
      background: var(--panel2);
      color: var(--paper);
    }


    /* MAIN TWO COLUMN AREA */

    .relationship-workspace {
      display: grid;
      grid-template-columns:
        minmax(0, 1fr)
        350px;
      gap: 32px;
      align-items: start;
    }


    /* CHAT */

    .relationship-chat {
      min-height: 560px;
      display: flex;
      flex-direction: column;
    }

    .relationship-thread {
      flex: 1;
      padding: 20px 4px;
    }

    .relationship-empty-chat {
      min-height: 330px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text-align: center;

      color: var(--faint);
    }

    .relationship-chat-icon {
      font-size: 24px;
      margin-bottom: 14px;
    }

    .relationship-empty-chat p {
      color: var(--dim);
      font-size: 14px;
    }

    .relationship-empty-chat span {
      max-width: 420px;
      margin-top: 6px;
      font-size: 12px;
    }


    /* COMPOSER */

    .relationship-composer {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
    }

    .relationship-composer:focus-within {
      border-color: var(--ind-deep);

      box-shadow:
        0 0 0 3px
        rgba(74, 84, 216, .12);
    }

    .relationship-composer textarea {
      width: 100%;
      min-height: 65px;
      max-height: 220px;

      resize: none;

      background: transparent;
      border: 0;

      color: var(--paper);

      font-family: var(--disp);
      font-size: 15px;
      line-height: 1.5;
    }

    .relationship-composer textarea:focus {
      outline: none;
    }

    .relationship-composer textarea::placeholder {
      color: var(--faint);
    }

    .relationship-composer-row {
      display: flex;
      align-items: center;
      margin-top: 8px;
    }

    .relationship-composer-row .spacer {
      flex: 1;
    }

    .relationship-plus {
      width: 34px;
      height: 34px;

      border-radius: 9px;

      background: transparent;
      border: 1px solid transparent;

      color: var(--dim);

      cursor: pointer;
    }

    .relationship-plus:hover {
      background: var(--panel2);
      border-color: var(--line);
      color: var(--paper);
    }


    /* RIGHT SIDEBAR */

    .relationship-sidebar {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
    }

    .relationship-setting {
      border-bottom: 1px solid var(--line);
    }

    .relationship-setting:last-child {
      border-bottom: 0;
    }

    .relationship-setting-head {
      width: 100%;

      display: flex;
      align-items: flex-start;

      gap: 16px;

      padding: 20px;

      background: transparent;
      border: 0;

      color: var(--paper);

      cursor: pointer;
      text-align: left;
    }

    .relationship-setting-head > div {
      flex: 1;
    }

    .relationship-setting-head strong {
      display: block;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .relationship-setting-head span {
      display: block;

      color: var(--faint);

      font-size: 11.5px;
      line-height: 1.5;
    }

    .relationship-setting-head > i {
      color: var(--dim);
      margin-top: 3px;
    }

    .relationship-setting-head:hover {
      background:
        rgba(139, 147, 248, .04);
    }


    /* CONTEXT EMPTY STATE */

    .relationship-context-empty {
      margin: 0 20px 20px;

      min-height: 145px;

      border-radius: 13px;

      background:
        rgba(0, 0, 0, .18);

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      text-align: center;

      padding: 20px;

      cursor: pointer;
    }

    .relationship-context-empty > i {
      color: var(--dim);
      font-size: 23px;
      margin-bottom: 10px;
    }

    .relationship-context-empty strong {
      font-size: 12px;
    }

    .relationship-context-empty span {
      color: var(--faint);
      font-size: 11px;
      max-width: 230px;
      margin-top: 5px;
      line-height: 1.5;
    }


    /* RESPONSIVE */

    @media (max-width: 900px) {

      .relationship-workspace {
        grid-template-columns: 1fr;
      }

      .relationship-sidebar {
        order: -1;
      }

    }

    @media (max-width: 600px) {

      .relationship-view {
        padding: 20px 14px 40px;
      }

      .relationship-workspace-head h1 {
        font-size: 25px;
      }

    }

.relationship-thread {
  flex: 1;
  padding: 20px 4px;

  overflow-y: auto;

  display: flex;
  flex-direction: column;

  gap: 22px;
}


.relationship-message {
  display: flex;
  width: 100%;
}


.relationship-message.user {
  justify-content: flex-end;
}


.relationship-message.assistant,
.relationship-message.error {
  justify-content: flex-start;
}


.relationship-message-content {
  max-width: 78%;

  font-size: 14px;
  line-height: 1.65;

  white-space: pre-wrap;
  word-break: break-word;
}


/* USER */

.relationship-message.user
.relationship-message-content {

  background: var(--panel2);

  border:
    1px solid var(--line);

  border-radius:
    16px 16px 4px 16px;

  padding:
    11px 15px;

  color:
    var(--paper);
}


/* AI */

.relationship-message.assistant
.relationship-message-content {

  color:
    var(--paper);

  padding:
    4px 2px;
}


/* ERROR */

.relationship-message.error
.relationship-message-content {

  color:
    #e88;

  font-family:
    var(--mono);

  font-size:
    12px;
}


/* THINKING */

.relationship-thinking {

  color:
    var(--faint);

  font-family:
    var(--mono);

  font-size:
    11px;

  animation:
    relationshipPulse
    1.2s
    ease-in-out
    infinite;
}


@keyframes relationshipPulse {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: 1;
  }

}

/* ================================================
   RELATIONSHIP INSTRUCTIONS MODAL
================================================ */

.relationship-instructions-overlay {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
}

.relationship-instructions-overlay.open {
  display: flex;
}


.relationship-instructions-modal {
  width: 100%;
  max-width: 700px;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;

  padding: 22px;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, .45);
}


.relationship-instructions-modal h2 {
  margin: 0 0 6px;

  color: var(--paper);

  font-size: 21px;
  font-weight: 650;
}


.relationship-instructions-help {
  margin: 0 0 14px;

  color: var(--dim);

  font-size: 13px;
  line-height: 1.55;
}


.relationship-instructions-help strong {
  color: var(--paper);
  font-weight: 600;
}


/* TEXTAREA */

.relationship-instructions-modal textarea {
  display: block;

  width: 100%;
  height: 320px;

  box-sizing: border-box;

  resize: vertical;

  padding: 14px;

  background: var(--panel2);

  border: 1px solid var(--line);
  border-radius: 9px;

  color: var(--paper);

  font-family: var(--disp);
  font-size: 14px;
  line-height: 1.55;
}


.relationship-instructions-modal textarea::placeholder {
  color: var(--faint);
}


.relationship-instructions-modal textarea:focus {
  outline: none;

  border-color: var(--ind-deep);

  box-shadow:
    0 0 0 3px rgba(74, 84, 216, .12);
}


/* ACTIONS */

.relationship-instructions-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 18px;
}


.relationship-instructions-cancel,
.relationship-instructions-save {
  border: 0;
  border-radius: 8px;

  padding: 9px 15px;

  font-family: var(--disp);
  font-size: 13px;

  cursor: pointer;
}


.relationship-instructions-cancel {
  background: var(--panel2);
  color: var(--paper);

  border: 1px solid var(--line);
}


.relationship-instructions-save {
  background: var(--paper);
  color: var(--ink);
}


.relationship-instructions-save:disabled {
  opacity: .45;
  cursor: default;
}


/* MOBILE */

@media (max-width: 600px) {

  .relationship-instructions-overlay {
    padding: 10px;
  }

  .relationship-instructions-modal {
    padding: 18px;
  }

  .relationship-instructions-modal textarea {
    height: 260px;
  }

}

.relationship-setting-head span {
  display: -webkit-box;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;

  white-space: normal;
}

/* ================================================
   RELATIONSHIP CONTEXT MODAL
================================================ */

.relationship-context-overlay {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
}


.relationship-context-overlay.open {
  display: flex;
}


.relationship-context-modal {
  width: 100%;
  max-width: 650px;

  background: var(--panel);
  border: 1px solid var(--line);

  border-radius: 14px;

  padding: 22px;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, .45);
}


.relationship-context-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;

  margin-bottom: 20px;
}


.relationship-context-modal-head > div {
  flex: 1;
}


.relationship-context-modal-head h2 {
  margin: 0 0 5px;

  color: var(--paper);

  font-size: 21px;
}


.relationship-context-modal-head p {
  margin: 0;

  color: var(--dim);

  font-size: 13px;
  line-height: 1.5;
}


.relationship-context-close {
  width: 34px;
  height: 34px;

  background: transparent;
  border: 0;

  border-radius: 8px;

  color: var(--dim);

  cursor: pointer;
}


.relationship-context-close:hover {
  background: var(--panel2);
  color: var(--paper);
}


/* TYPES */

.relationship-context-types {
  display: flex;
  gap: 8px;

  margin-bottom: 20px;
}


.relationship-context-type {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 8px 13px;

  background: transparent;

  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--dim);

  font-size: 12px;

  cursor: pointer;
}


.relationship-context-type:hover,
.relationship-context-type.active {
  background: var(--panel2);
  color: var(--paper);
}


/* ACTIONS */

.relationship-context-actions {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 18px;
}

.relationship-context-item {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0 14px 8px;

  padding: 10px;

  border-radius: 9px;

  background:
    rgba(255, 255, 255, .025);
}


.relationship-context-item:hover {
  background:
    rgba(255, 255, 255, .045);
}


.relationship-context-item-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: var(--panel2);

  color: var(--dim);
}


.relationship-context-item-info {
  flex: 1;
  min-width: 0;
}


.relationship-context-item-info strong {
  display: block;

  color: var(--paper);

  font-size: 11.5px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.relationship-context-item-info span {
  display: block;

  margin-top: 2px;

  color: var(--faint);

  font-size: 10.5px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.relationship-context-item > button {
  width: 28px;
  height: 28px;

  background: transparent;
  border: 0;

  color: var(--faint);

  border-radius: 6px;

  cursor: pointer;
}


.relationship-context-item > button:hover {
  background: var(--panel2);
  color: var(--paper);
}

/* ================================================
   RELATIONSHIP SCHEDULE
================================================ */

.relationship-schedule-overlay {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
}

.relationship-schedule-overlay.open {
  display: flex;
}


.relationship-schedule-modal {
  width: 100%;
  max-width: 620px;

  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 22px;

  background: var(--panel);

  border: 1px solid var(--line);
  border-radius: 14px;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, .45);
}


.relationship-schedule-head {
  display: flex;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 22px;
}


.relationship-schedule-head > div {
  flex: 1;
}


.relationship-schedule-head h2 {
  margin: 0 0 5px;

  color: var(--paper);

  font-size: 21px;
}


.relationship-schedule-head p {
  margin: 0;

  color: var(--dim);

  font-size: 13px;
  line-height: 1.5;
}


.relationship-schedule-close {
  width: 34px;
  height: 34px;

  background: transparent;
  border: 0;

  border-radius: 8px;

  color: var(--dim);

  cursor: pointer;
}


.relationship-schedule-close:hover {
  background: var(--panel2);
  color: var(--paper);
}


/* FORM */

.relationship-schedule-modal .field {
  margin-bottom: 17px;
}


.relationship-schedule-modal .field label {
  display: block;

  margin-bottom: 7px;

  color: var(--dim);

  font-size: 12px;
}


.relationship-schedule-modal input,
.relationship-schedule-modal select,
.relationship-schedule-modal textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 10px 12px;

  background: var(--panel2);

  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--paper);

  font-family: var(--disp);
  font-size: 13px;
}


.relationship-schedule-modal textarea {
  resize: vertical;

  min-height: 110px;

  line-height: 1.5;
}


.relationship-schedule-modal input:focus,
.relationship-schedule-modal select:focus,
.relationship-schedule-modal textarea:focus {
  outline: none;

  border-color: var(--ind-deep);

  box-shadow:
    0 0 0 3px rgba(74, 84, 216, .12);
}


.relationship-schedule-fields {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 12px;
}


.relationship-schedule-actions {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 24px;
}


@media (max-width: 600px) {

  .relationship-schedule-fields {
    grid-template-columns: 1fr;
  }

}

/* ==========================================
   CHAT ATTACHMENTS
========================================== */

.chat-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  width: 100%;
  margin-top: 8px;
}

.chat-files:empty {
  display: none;
}


/* Individual attachment */

.chat-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  max-width: 260px;
  padding: 7px 9px 7px 10px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 9px;

  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.chat-file:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--faint);
}


/* File icon */

.chat-file-icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  border-radius: 6px;

  background: rgba(139, 147, 248, 0.12);
  color: #8B93F8;

  font-size: 12px;
}


/* Filename */

.chat-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  min-width: 0;
}


/* Remove attachment */

.chat-file-remove {
  flex: 0 0 auto;

  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin-left: 2px;

  border: 0;
  border-radius: 50%;

  background: transparent;
  color: var(--faint);

  cursor: pointer;

  font-size: 10px;

  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.chat-file-remove:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.message-body {
  min-width: 0;
  max-width: calc(100% - 42px);
}

.message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding-left: 4px;
}

.message-action {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  border-radius: 7px;

  color: var(--faint);

  font-size: 13px;

  cursor: pointer;

  transition:
    color .15s ease,
    background .15s ease;
}

.message-action:hover {
  color: var(--paper);
  background: rgba(139, 147, 248, .08);
}

.message-action:active {
  transform: scale(.94);
}

.message-action.speaking {
  color: var(--ind);
  background: rgba(139, 147, 248, .10);
}

.message-action.copied {
  color: var(--pos);
}


/* AI */
.msg.ai .message-body {
  flex: 1;
}

.msg.ai .bubble {
  width: 100%;
  max-width: 100%;
}

/* USER */
.msg.user {
  justify-content: flex-end;
}

.msg.user .who {
  display: none;
}

.msg.user .message-body {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 78%;
}

.msg.user .bubble {
  display: block;
  width: fit-content;
  max-width: 100%;

  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 18px;

  padding: 10px 14px;

  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

/* AI ACTIONS */
.msg.ai .message-actions {
  display: flex;
  align-items: center;
  gap: 4px;

  margin-top: 5px;
  padding-left: 2px;
}

.msg.ai .message-action {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  border-radius: 7px;

  color: var(--faint);
  font-size: 13px;

  cursor: pointer;
  transition:
    color .15s ease,
    background .15s ease;
}

.msg.ai .message-action:hover {
  color: var(--paper);
  background: rgba(139, 147, 248, .08);
}

.msg.ai .message-action.copied {
  color: var(--pos);
}

/* MOBILE */
@media (max-width: 820px) {
  .msg.user .message-body {
    max-width: 88%;
  }
}

/* ================================================
   RELATIONSHIP MESSAGE BODY
================================================ */

.relationship-message-body {
  min-width: 0;
  max-width: 78%;
}


/*
 * Width now belongs to the body because
 * body contains both text + action buttons.
 */

.relationship-message-body
.relationship-message-content {
  max-width: 100%;
}


/*
 * Override old content width
 */

.relationship-message-content {
  max-width: 100%;
}


/* ================================================
   RELATIONSHIP AI ACTIONS
================================================ */

.relationship-message-actions {
  display: flex;
  align-items: center;
  gap: 4px;

  margin-top: 5px;
  padding-left: 2px;
}


.relationship-message-action {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 7px;

  color: var(--faint);
  font-size: 13px;

  cursor: pointer;

  transition:
    color .15s ease,
    background .15s ease;
}


.relationship-message-action:hover {
  color: var(--paper);

  background:
    rgba(139, 147, 248, .08);
}


.relationship-message-action.copied {
  color: var(--pos);
}


/*
 * Keep user message on right
 */

.relationship-message.user
.relationship-message-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}


/*
 * AI message on left
 */

.relationship-message.assistant
.relationship-message-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ==================================================
   AUTH MODAL
================================================== */

#signinOverlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ==================================================
   AUTH CARD
================================================== */

.auth-modal {
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 32px;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .025),
      rgba(255, 255, 255, 0)
    ),
    var(--panel);

  border: 1px solid var(--line);

  box-shadow:
    0 24px 80px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(255, 255, 255, .015);

  animation: authModalIn .22s ease-out;
}


/* ==================================================
   TITLE
================================================== */

.auth-modal h2 {
  margin: 0;

  font-family: var(--disp);
  font-size: 24px;
  font-weight: 600;

  letter-spacing: -.025em;

  color: var(--paper);
}


/* ==================================================
   DESCRIPTION
================================================== */

.auth-modal .note {
  margin-top: 8px;
  margin-bottom: 24px;

  max-width: 360px;

  color: var(--faint);

  font-size: 13.5px;
  line-height: 1.55;
}


/* ==================================================
   FIELDS
================================================== */

.auth-modal .field {
  margin-top: 16px;
}


.auth-modal .field:first-of-type {
  margin-top: 0;
}


/* ==================================================
   LABEL
================================================== */

.auth-modal .field label {
  display: block;

  margin-bottom: 7px;

  font-family: var(--mono);

  font-size: 10.5px;
  font-weight: 500;

  letter-spacing: .11em;

  text-transform: uppercase;

  color: var(--dim);
}


/* ==================================================
   INPUT / SELECT
================================================== */

.auth-modal .field input,
.auth-modal .field select {
  display: block;

  width: 100%;
  height: 44px;

  padding: 0 13px;

  box-sizing: border-box;

  border: 1px solid var(--line);
  border-radius: 10px;

  outline: none;

  background: var(--panel2);

  color: var(--paper);

  font-family: var(--disp);
  font-size: 14px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


/* ==================================================
   PLACEHOLDER
================================================== */

.auth-modal .field input::placeholder {
  color: var(--faint);
  opacity: .75;
}


/* ==================================================
   INPUT HOVER
================================================== */

.auth-modal .field input:hover,
.auth-modal .field select:hover {
  border-color: rgba(139, 147, 248, .45);
}


/* ==================================================
   SELECT
================================================== */

.auth-modal select {
  cursor: pointer;
}


/* ==================================================
   ERROR MESSAGE
================================================== */

.auth-error {
  margin-top: 16px;

  padding: 10px 12px;

  border: 1px solid rgba(239, 107, 107, .35);
  border-radius: 9px;

  background: rgba(239, 107, 107, .08);

  color: #F4B8B6;

  font-family: var(--mono);

  font-size: 11.5px;
  line-height: 1.5;

  animation: authErrorIn .18s ease-out;
}


/* ==================================================
   ACTIONS
================================================== */

.auth-modal .modal-actions {
  display: flex;

  gap: 10px;

  margin-top: 24px;
}


/* ==================================================
   PRIMARY BUTTON
================================================== */

.auth-modal .modal-actions .primary {
  position: relative;

  flex: 1;

  min-height: 44px;

  padding: 11px 18px;

  border: 1px solid transparent;
  border-radius: 10px;

  background: var(--ind-deep);

  color: #fff;

  font-family: var(--disp);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform .15s ease,
    opacity .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}


.auth-modal .modal-actions .primary:hover:not(:disabled) {
  filter: brightness(1.08);

  box-shadow:
    0 6px 20px rgba(74, 84, 216, .22);

  transform: translateY(-1px);
}


.auth-modal .modal-actions .primary:active:not(:disabled) {
  transform: translateY(0);
}


/* ==================================================
   LOADING / DISABLED
================================================== */

.auth-modal .modal-actions .primary:disabled {
  opacity: .62;

  cursor: wait;

  transform: none;

  box-shadow: none;
}


/* ==================================================
   GHOST BUTTON
================================================== */

.auth-modal .modal-actions .ghost {
  min-height: 44px;

  padding: 11px 16px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: transparent;

  color: var(--dim);

  font-family: var(--disp);

  font-size: 14px;

  cursor: pointer;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.auth-modal .modal-actions .ghost:hover {
  color: var(--paper);

  border-color: rgba(255, 255, 255, .16);

  background: rgba(255, 255, 255, .035);
}


/* ==================================================
   SIGN IN / CREATE ACCOUNT SWITCH
================================================== */

.auth-switch {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  margin-top: 22px;
  padding-top: 20px;

  border-top: 1px solid var(--line);

  color: var(--faint);

  font-size: 12.5px;
}


/* ==================================================
   AUTH LINK
================================================== */

.auth-link {
  appearance: none;
  -webkit-appearance: none;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--ind);

  font-family: var(--disp);

  font-size: 12.5px;
  font-weight: 600;

  cursor: pointer;

  transition:
    color .15s ease,
    opacity .15s ease;
}


.auth-link:hover {
  color: var(--paper);
}


.auth-link:focus-visible {
  outline: 2px solid var(--ind);
  outline-offset: 3px;

  border-radius: 3px;
}


/* ==================================================
   SIGN IN / SIGN UP TRANSITION
================================================== */

#signinForm,
#signupForm {
  animation: authFormIn .18s ease-out;
}


/* ==================================================
   ANIMATIONS
================================================== */

@keyframes authModalIn {

  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes authFormIn {

  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes authErrorIn {

  from {
    opacity: 0;

    transform:
      translateY(-3px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 520px) {

  #signinOverlay {
    padding: 12px;

    align-items: flex-end;
  }


  .auth-modal {
    width: 100%;

    max-height: calc(100vh - 24px);

    padding: 24px 20px;

    border-radius: 18px 18px 12px 12px;
  }


  .auth-modal h2 {
    font-size: 22px;
  }


  .auth-modal .note {
    margin-bottom: 20px;
  }


  .auth-modal .field input,
  .auth-modal .field select {
    /*
     * 16px prevents iOS Safari
     * from zooming when focused.
     */
    font-size: 16px;

    height: 46px;
  }


  .auth-modal .modal-actions {
    flex-direction: column-reverse;
  }


  .auth-modal .modal-actions .ghost,
  .auth-modal .modal-actions .primary {
    width: 100%;
  }


  .auth-switch {
    flex-wrap: wrap;

    text-align: center;
  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  .auth-modal,
  #signinForm,
  #signupForm,
  .auth-error {
    animation: none;
  }

}