:root {
      --bg: #f5f5f5;
      --panel: #ffffff;
      --border: #dddddd;
      --me: #dcf8c6;
      --other: #eeeeee;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: var(--bg);
    }

    .app {
      display: flex;
      flex-direction: column;
      height: 100dvh;
      max-width: 800px;
      margin: auto;
      background: var(--panel);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
    }

    header {
      padding: 12px;
      border-bottom: 1px solid var(--border);
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .title {
        padding: 12px;
        font-weight: 600;
    }


    .text {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .text-center {
        text-align: center;
    }

    .text-bold {
      font-weight: 600;
    }

    .text-large {
      font-size: 20px;
    }

    .text-error {
      padding: 10px;
      color: red;
      font-weight: 600;
      font-size: 20px;
    }



    button {
      padding: 10px 16px;
      font-size: 16px;
      cursor: pointer;
    }