/* ===== UI bits ===== */
    .wo-title{
      margin: 6px 0 12px;
      font-weight: 1000;
      font-size: 16px;
      color: color-mix(in srgb, var(--wo-text) 88%, transparent);
      display:flex;align-items:center;justify-content:space-between;gap:10px;
    }
    .wo-badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);color:var(--wo-muted);font-size:11px;white-space:nowrap;
    }
    .wo-badge i{color:var(--wo-icon);}
    .wo-btn{
      height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);color:var(--wo-text);font-weight:900;font-size:12px;cursor:pointer;
      display:inline-flex;align-items:center;gap:10px;
    }
    .wo-btn i{color:var(--wo-icon);}
    .wo-btn:hover{background:var(--wo-soft);}
    .wo-btn.wo-primary{border-color:transparent;background:color-mix(in srgb, var(--wo-accent) 92%, #fff);color:#111;}
    .wo-btn.wo-primary i{color:#111;}
    .wo-btn.wo-primary:hover{background:var(--wo-accent);}

    .wo-inbox-top{
      display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
      margin-bottom:10px;
    }
    .wo-inbox-search{position:relative;flex:1 1 auto;min-width:220px;}
    .wo-inbox-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--wo-icon);font-size:12px;}
    .wo-inbox-search input{
      width:100%;height:36px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-soft);padding:0 12px 0 34px;outline:none;font-size:12px;color:var(--wo-text);
    }
    .wo-inbox-search input::placeholder{color:var(--wo-muted);}

    .wo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px;}
    .wo-tab{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 10px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);color:var(--wo-muted);font-size:11px;cursor:pointer;user-select:none;
    }
    .wo-tab i{color:var(--wo-icon);}
    .wo-tab.wo-active{color:var(--wo-text);background:var(--wo-soft);}

    /* ===== LISTA KONWERSACJI (mini-wizytówki) ===== */
    .wo-threadlist{display:grid;gap:12px;margin-top:10px;}

    /* klucz: zero paddingu -> avatar od krawędzi, pełna wysokość -> align-items:stretch */
    .wo-thread{
      border:1px solid var(--wo-line);
      border-radius:5px;

      padding:0;                 /* WAŻNE */
      display:grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;

      align-items: stretch;      /* WAŻNE */
      cursor:pointer;
      position:relative;
      overflow:hidden;           /* WAŻNE (przycina do radiusu) */
      min-height: 118px;         /* stabilna wysokość karty */
    }
    .wo-thread:hover{background:color-mix(in srgb, var(--wo-soft) 70%, var(--wo-panel));}
    /*.wo-thread.wo-active{outline:2px solid color-mix(in srgb, var(--wo-accent) 42%, transparent);}*/

    .wo-thread.wo-unread::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
      z-index:2;
    }

    /* avatar jako "okładka": kwadrat na pełną wysokość wiersza */
    .wo-tava{
      height: 150px;
      aspect-ratio: 1 / 1;       /* kwadrat = wysokość */
      width: auto;
      border: 0;
      border-radius: 0;          /* kwadrat */
      overflow:hidden;
    }
    .wo-tava img{width:100%;height:100%;object-fit:cover;display:block;}

    /* środek dostaje padding, nie cały wiersz */
    .wo-tmid{padding:12px 0 12px 12px;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center;}
    .wo-tright{padding:12px 12px 12px 0;text-align:right;display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:flex-end;min-width:0;}

    .wo-tname{
      margin:0;
      font-size: 13px;
      font-weight: 1000;
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      color:#000000 !important;
    }
    .wo-tname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 520px;}
    .wo-verified{
      width:18px;height:18px;border-radius:999px;
      background:color-mix(in srgb, var(--wo-accent) 20%, var(--wo-panel));
      border:1px solid color-mix(in srgb, var(--wo-accent) 55%, var(--wo-line));
      display:grid;place-items:center;color:color-mix(in srgb, var(--wo-accent) 85%, var(--wo-text));
      flex:0 0 auto;
    }
    .wo-verified i{font-size:10px;}

    .wo-tmeta{
      flex-wrap:wrap;gap:10px;align-items:center;
      font-size:11px;color:color-mix(in srgb, var(--wo-muted) 92%, transparent);
    }
    .wo-tmeta .dot{opacity:.55}
    .wo-chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:5px 10px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);color:var(--wo-muted);font-size:11px;white-space:nowrap;
    }
    .wo-chip i{color:var(--wo-icon);font-size:11px;}

    .wo-tsnippet{
      margin:0;
      font-size: 11px;
      line-height: 1.35;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 720px;
    }

    .wo-time{font-size:10px;color:var(--wo-muted);white-space:nowrap;}
    .wo-new{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:26px;height:20px;padding:0 8px;border-radius:999px;
      background:color-mix(in srgb, var(--wo-accent) 92%, #fff);
      color:#111;font-weight:1000;font-size:11px;
    }

    .wo-actions{
      display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
    }
    .wo-miniicon{
      width:34px;height:34px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);display:grid;place-items:center;color:var(--wo-muted);cursor:pointer;
    }
    .wo-miniicon:hover{background:var(--wo-soft);color:var(--wo-text);}





    /* Thread */


  

    /* ===== CHAT – wariant A: “profile rail” + timeline ===== */
    .wo-badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);color:var(--wo-muted);font-size:11px;white-space:nowrap;
    }
    .wo-badge i{color:var(--wo-icon);}

    .wo-chat-shell{
      /* border:1px solid var(--wo-line); */
      border-radius:16px;
      overflow:hidden;
      background: color-mix(in srgb, var(--wo-panel) 92%, transparent);
      display:grid;
      grid-template-columns: 320px 1fr;
      min-height: calc(100vh - var(--wo-header-h) - 92px);
    }

    /* lewy panel rozmowy */
    .wo-peer{
      /* border-right:1px solid var(--wo-line); */
      background: color-mix(in srgb, var(--wo-soft) 55%, var(--wo-panel));
      padding:0;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    .wo-peer-cover{
      position:relative;
      /* height: 160px; */
      overflow:hidden;
      border-bottom:1px solid var(--wo-line);
    }
    .wo-peer-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05);}
    .wo-peer-cover::after{
      content:"";
      position:absolute;inset:0;
      background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
    }

    .wo-peer-card{
      /* margin-top:-46px; */
      padding: 0 14px 14px;
      position:relative;
    }
    .wo-peer-ava{
      width:92px;height:92px;border-radius:18px;
      border: 3px solid var(--wo-panel);
      overflow:hidden;background:#ddd;
      box-shadow: 0 18px 45px rgba(16,24,40,.18);
    }
    .wo-peer-ava img{width:100%;height:100%;object-fit:cover;display:block;}

    .wo-peer-name{
      margin:12px 0 0;
      font-weight:1000;
      font-size:15px;
      display:flex;align-items:center;gap:10px;
      color: color-mix(in srgb, var(--wo-text) 92%, transparent);
    }
    .wo-ver{
      width:18px;height:18px;border-radius:999px;
      display:grid;place-items:center;
      background:color-mix(in srgb, var(--wo-accent) 18%, var(--wo-panel));
      border:1px solid color-mix(in srgb, var(--wo-accent) 55%, var(--wo-line));
      color: color-mix(in srgb, var(--wo-accent) 85%, var(--wo-text));
      flex:0 0 auto;
    }
    .wo-ver i{font-size:10px;}

    .wo-peer-meta{
      margin:8px 0 0;
      display:flex;flex-wrap:wrap;gap:10px;align-items:center;
      font-size:11px;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
    }
    .wo-chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);color:var(--wo-muted);font-size:11px;white-space:nowrap;
    }
    .wo-chip i{color:var(--wo-icon);font-size:11px;}

    .wo-peer-actions{
      display:flex;gap:8px;flex-wrap:wrap;
      padding: 12px 14px 14px;
      margin-top:auto;
      border-top:1px solid var(--wo-line);
      background: color-mix(in srgb, var(--wo-panel) 92%, transparent);
    }
    .wo-iconbtn{
      width:38px;height:38px;border-radius:999px;border:1px solid var(--wo-line);
      background:var(--wo-chip-bg);
      color:var(--wo-muted);
      display:grid;place-items:center;cursor:pointer;
    }
    .wo-iconbtn:hover{background:var(--wo-soft);color:var(--wo-text);}

    /* prawy panel wiadomości */
    .wo-talk{
      display:grid;
      grid-template-rows: auto 1fr auto;
      min-height:0;
    }

    .wo-talk-top{
      padding: 14px;
      /* border-bottom:1px solid var(--wo-line); */
      display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
      background: color-mix(in srgb, var(--wo-panel) 92%, transparent);
    }
    .wo-talk-top .left{
      display:flex;align-items:center;gap:10px;min-width:0;
    }
    .wo-dot{
      width:8px;height:8px;border-radius:999px;background: var(--wo-good);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wo-good) 18%, transparent);
    }
    .wo-talk-title{
      margin:0;
      font-weight:1000;
      font-size:13px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      max-width: 520px;
    }
    .wo-talk-sub{
      margin:4px 0 0;
      font-size:11px;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
    }

    .wo-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

    .wo-messages{
      padding: 14px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap: 10px;
      min-height: 0;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--wo-soft) 55%, var(--wo-panel)),
        color-mix(in srgb, var(--wo-panel) 92%, transparent)
      );
    }

    .wo-day{
      align-self:center;
      font-size:10px;
      letter-spacing:.6px;
      text-transform:uppercase;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--wo-line);
      background: var(--wo-chip-bg);
      margin: 6px 0;
    }

    .wo-bubble{
      max-width: 72%;
      border:1px solid var(--wo-line);
      border-radius: 16px;
      padding: 10px 12px;
      background: var(--wo-panel);
      color: var(--wo-text);
      font-size:12px;
      line-height:1.5;
      position:relative;
      box-shadow: 0 10px 22px rgba(16,24,40,.06);
    }
    .wo-bubble .mmeta{
      margin-top:7px;
      font-size:10px;
      color: var(--wo-muted);
      display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    }

    .wo-bubble--me{
      margin-left:auto;
      background: color-mix(in srgb, var(--wo-accent) 12%, var(--wo-panel));
    }

    .wo-bubble--peer{ margin-right:auto; }

    .wo-attach{
      margin-top:8px;
      border:1px dashed color-mix(in srgb, var(--wo-line) 85%, transparent);
      background: color-mix(in srgb, var(--wo-soft) 60%, transparent);
      border-radius:14px;
      padding:10px;
      display:flex;align-items:center;gap:10px;
    }
    .wo-attach i{color: var(--wo-icon);}
    .wo-attach b{font-size:11px;}
    .wo-attach span{font-size:10px;color: var(--wo-muted);}

    .wo-compose{
      padding: 12px 14px 14px;
      border-top:1px solid var(--wo-line);
      background: color-mix(in srgb, var(--wo-panel) 92%, transparent);
    }
    .wo-compose-row{
      display:flex;gap:10px;align-items:flex-end;
    }
    .wo-textarea{
      flex:1 1 auto;
      min-height: 44px;
      max-height: 140px;
      resize: vertical;
      width:100%;
      border-radius:14px;
      border:1px solid var(--wo-line);
      background: var(--wo-panel);
      padding:10px 12px;
      font-size:12px;
      color: var(--wo-text);
      outline:none;
    }
    .wo-textarea::placeholder{color: var(--wo-muted);}
    .wo-send{
      height:44px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid transparent;
      background: color-mix(in srgb, var(--wo-accent) 92%, #fff);
      color:#111;
      font-weight:1000;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
    }
    .wo-send:hover{background: var(--wo-accent);}

    .wo-compose-tools{
      display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
      margin-top:10px;
    }
    .wo-help{
      margin:0;
      font-size:11px;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
    }