/* TAROKUN mythos chat shell (tarokun-on-01) */

    #drawer.mythos-chat, .drawer.persona-chat{ --gold:#d5a64d; --gold2:#f3d58a; --rose:#d95673; --bg:#0b0f1f; --panel:#141a30; --line:rgba(255,255,255,.1); --muted:#9aa2c4; }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:#f2ecdd;font-family:'Noto Sans KR',sans-serif;word-break:keep-all;display:flex;flex-direction:column}
    a{text-decoration:none;color:inherit}

    /* header */
    .chat-header{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(11,15,31,.92);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
    .back{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;flex-shrink:0}
    .back:hover{border-color:var(--gold2)}
    .ch-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;border:1px solid rgba(245,213,136,.4)}
    .ch-info{min-width:0}
    .ch-name-row{display:flex;align-items:center;gap:8px}
    .ch-name{font-weight:800;font-size:15.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ch-mbti{background:rgba(255,255,255,.12);font-size:10px;padding:2px 7px;border-radius:99px;font-weight:800;color:var(--gold2);flex-shrink:0}
    .ch-tag{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ch-menu{margin-left:auto;color:var(--muted);font-size:20px;cursor:pointer;flex-shrink:0}

    .art.g1{background:radial-gradient(circle at 40% 25%,#5a3a7a,#1c1530)}
    .art.g2{background:radial-gradient(circle at 40% 25%,#7a3a4a,#301218)}
    .art.g3{background:radial-gradient(circle at 40% 25%,#3a5a7a,#12202f)}
    .art.g4{background:radial-gradient(circle at 40% 25%,#7a6530,#302512)}
    .art.g5{background:radial-gradient(circle at 40% 25%,#3a7a6a,#122f28)}
    .art.g6{background:radial-gradient(circle at 40% 25%,#7a3a6a,#2f1230)}
    .art.g7{background:radial-gradient(circle at 40% 25%,#4a6a3a,#182f12)}
    .art.g8{background:radial-gradient(circle at 40% 25%,#3a4a7a,#12172f)}

    /* thread */
    .thread-wrap{flex:1;overflow-y:auto;position:relative}
    .thread-bg{position:absolute;inset:0;background-image:radial-gradient(#f4d387 1px,transparent 1.5px);background-size:52px 52px;opacity:.05;pointer-events:none}
    .thread{max-width:640px;margin:auto;padding:24px 16px 100px;position:relative;z-index:1}
    .day-chip{text-align:center;margin:14px 0 22px}
    .day-chip span{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:11px;color:var(--muted)}

    .msg{display:flex;gap:10px;margin-bottom:18px;align-items:flex-end}
    .msg.me{flex-direction:row-reverse}
    .msg .mini-av{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid rgba(245,213,136,.35)}
    .bubble{max-width:74%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.7}
    .msg:not(.me) .bubble{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px;color:#f2ecdd}
    .msg.me .bubble{background:linear-gradient(135deg,var(--rose),#c14d68);color:#fff;border-bottom-right-radius:4px}
    .msg-time{font-size:10px;color:#6a7196;margin:0 6px;align-self:flex-end}

    .intro-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 20px;text-align:center;margin-bottom:26px}
    .intro-card .big-av{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid rgba(245,213,136,.4)}
    .intro-card h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;margin:0 0 6px;color:#fff}
    .intro-card p{font-size:12.5px;color:var(--muted);margin:0}

    /* input */
    .composer{position:sticky;bottom:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:rgba(11,15,31,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
    .composer-inner{max-width:640px;margin:auto;display:flex;gap:10px;align-items:flex-end}
    .composer textarea{flex:1;resize:none;max-height:120px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:#f2ecdd;font-family:inherit;font-size:14px;padding:12px 16px;outline:none;line-height:1.6}
    .composer textarea::placeholder{color:#6a7196}
    .composer textarea:focus{border-color:var(--gold2)}
    .send-btn{width:44px;height:44px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1c1408;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.2s}
    .send-btn:hover{transform:translateY(-2px)}
    .send-btn:disabled{opacity:.4;pointer-events:none}

    .typing{display:flex;gap:4px;padding:14px 15px}
    .typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);display:inline-block;animation:bounce 1.1s ease-in-out infinite}
    .typing span:nth-child(2){animation-delay:.15s}
    .typing span:nth-child(3){animation-delay:.3s}
    @keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

    .disclaimer{max-width:640px;margin:0 auto 16px;text-align:center;font-size:10.5px;color:#6a7196;line-height:1.6}
  
#drawer.mythos-chat .drawer-head, #drawer.persona-chat .drawer-head{background:rgba(11,15,31,.92);border-color:rgba(255,255,255,.1)}
#drawer.mythos-chat .messages, #drawer.persona-chat .messages{background:#0b0f1f}