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

  body {

    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

    background: var(--bg);

    color: var(--text);

    height: 100vh;

    overflow: hidden;

  }

  .app {
    width: 100%;
    height: 100vh;
    background: var(--bg);
    display: grid;
    grid-template-columns: 300px 1fr;
    overflow: clip;
  }

  .app.hidden { display: none !important; }

  .avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: var(--bg-soft);

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 500;

    color: var(--text);

    flex-shrink: 0;

    overflow: hidden;

  }

  .chats::-webkit-scrollbar { width: 4px; }

  .chats::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .messages::-webkit-scrollbar { width: 4px; }

  .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); gap: 8px; }

  .btn { width: 100%; padding: 10px; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }

  .btn:hover { opacity: 0.85; }

  .btn-primary { background: var(--accent); color: var(--accent-text); }

  .btn-danger { background: var(--danger); color: #fff; margin-top: 4px; }

  .input-group { margin-bottom: 10px; }

  .input-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; }

  .input-group input, .input-group textarea {

    width: 100%; padding: 9px 12px; background: var(--bg-soft); border: 1px solid var(--border);

    border-radius: 8px; color: var(--text); font-size: 13px; outline: none; font-family: inherit;

  }

  .input-group input:focus, .input-group textarea:focus { border-color: var(--accent); }

  /* Telecat Sticker Panel */

  .telecat-sticker-panel {

    display: none;

    background: var(--surface);

    padding: 14px;

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

  }

  .telecat-sticker-panel.active {

    display: block;

    animation: slideIn .2s ease;

  }

  .sticker-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 6px;

  }

  .sticker {

    font-size: 30px;

    text-align: center;

    padding: 8px;

    cursor: pointer;

    border-radius: 10px;

    transition: all .15s ease;

  }

  .sticker:hover {

    background: var(--surface2);

    transform: scale(1.15);

  }