:root{
      --pink-dark: #882b54;
      --pink-main: #c4457a;
      --pink-light: #ff69b4;
      --pink-soft: #ffe4e9;
      --bubble-user: #ffd1dc;
      --bubble-bot: #ffffff;
      --bg: #fff5f7;
      --line: #f3d1db;
      --text: #3d222b;
      --muted: #8c6673;
      --danger: #d9534f;
      --shadow: 0 12px 40px rgba(196, 69, 122, 0.16);
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Arial, Helvetica, sans-serif;color:var(--text);background:#f2e3e7;}

    body{
      display:flex;align-items:center;justify-content:center;
      background:
        radial-gradient(circle at 15% 15%, rgba(255,105,180,.18), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(136,43,84,.2), transparent 30%),
        #f2e3e7;
    }
    a {
  color: inherit;        /* herda a cor do elemento pai */
  text-decoration: none; /* remove o sublinhado */
}

    .app{
      width:min(430px,100vw);
      height:min(880px,100dvh);
      background:var(--bg);
      box-shadow:var(--shadow);
      border-radius:32px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      position:relative;
      border: 4px solid #fff;
    }

    .topbar{
      background:var(--pink-dark);
      color:#fff;
      padding: max(14px, env(safe-area-inset-top)) 16px 12px;
      display:flex;
      align-items:center;
      gap:12px;
      min-height:72px;
      z-index:2;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .back{font-size:26px;line-height:1;opacity:.95;cursor:pointer;}
    
    /* Estilização perfeita para a imagem no avatar */
    .avatar{
      width:46px;height:46px;border-radius:50%;background:#fff;
      display:grid;place-items:center;overflow:hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border: 2px solid rgba(255,255,255,0.8);
      flex-shrink: 0;
    }
    .avatar img{
      width:100%;height:100%;object-fit:cover;display:block;
    }

    .title{flex:1;min-width:0}
    .title strong{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.3px;}
    .title small{display:block;font-size:12px;opacity:.9;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .icons{display:flex;gap:16px;font-size:18px;opacity:.92}

    .chat{
      flex:1;overflow-y:auto;padding:16px 12px;
      background-color: #fff0f3;
      background-image:
        radial-gradient(circle at 16px 16px, rgba(196,69,122,.04) 1.5px, transparent 1.6px),
        radial-gradient(circle at 48px 44px, rgba(255,105,180,.03) 1.2px, transparent 1.3px);
      background-size:64px 64px;
      scroll-behavior:smooth;
    }

    .day{
      width:max-content;max-width:80%;margin:6px auto 14px;
      background:var(--pink-soft);color:var(--pink-dark);font-size:11.5px;font-weight:700;
      padding:6px 14px;border-radius:12px;letter-spacing:0.5px;
      box-shadow:0 1px 3px rgba(196,69,122,.1);
    }

    .msg{
      position:relative;max-width:85%;width:max-content;margin:8px 0;padding:10px 12px 20px 11px;
      border-radius:12px;line-height:1.4;font-size:14.5px;white-space:pre-line;
      box-shadow:0 2px 5px rgba(0,0,0,.06);animation:rise .18s ease-out;
      word-break:break-word;
    }
    .msg.bot{background:var(--bubble-bot);border-top-left-radius:3px;border:1px solid #fce4ec;}
    .msg.user{background:var(--bubble-user);margin-left:auto;border-top-right-radius:3px;color:#4a1525;}
    .time{position:absolute;right:8px;bottom:4px;color:var(--muted);font-size:10px;}
    .check{font-size:12px;color:var(--pink-main);margin-left:3px;}

    @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    .composer{
      background:#fff;
      border-top:1px solid var(--line);
      padding:12px 10px max(12px, env(safe-area-inset-bottom));
      box-shadow: 0 -4px 16px rgba(196,69,122,.06);
    }

    .panel{
      max-height:48dvh;overflow-y:auto;margin-bottom:2px;padding:0 2px;
    }
    
    .option{
      width:100%;border:0;border-radius:16px;background:#fff;color:var(--pink-dark);
      padding:12px 14px;margin:5px 0;font-size:14.5px;font-weight:700;text-align:left;
      box-shadow:0 2px 6px rgba(196,69,122,.08);cursor:pointer;
      border: 1px solid #f8d7e3;
      transition: all 0.1s ease;
    }
    .option:hover{background:#fff9fb;border-color:var(--pink-light);}
    .option.primary{background:var(--pink-main);color:#fff;border:0;text-align:center;}
    .option.primary:hover{background:#b0386a;}
    .option.dark{background:var(--pink-dark);color:#fff;border:0;text-align:center;}
    .option.secondary{background:var(--pink-soft);color:var(--pink-dark);border:1px solid #f7c5d5;text-align:center;}
    .option.danger{background:#fff2f2;color:var(--danger);border:1px solid #ffd6d6;text-align:center;}
    .option small{display:block;color:var(--muted);font-weight:400;margin-top:3px;font-size:12px;}
    .option.primary small,.option.dark small{color:rgba(255,255,255,.9)}

    input,textarea,select{
      width:100%;border:1px solid #f0c2d3;border-radius:16px;background:#fff;padding:12px 14px;margin:6px 0 8px;
      font:14.5px Arial, Helvetica, sans-serif;outline:none;box-shadow:0 2px 5px rgba(196,69,122,.05);
      color: var(--text);
    }
    input:focus, textarea:focus{border-color:var(--pink-main);box-shadow:0 0 0 3px rgba(196,69,122,.15);}
    textarea{min-height:80px;resize:vertical}
    
    label.inline{display:flex;gap:8px;align-items:flex-start;background:#fff;border-radius:14px;padding:10px 12px;margin:5px 0;box-shadow:0 2px 5px rgba(0,0,0,.04);font-size:14px;border:1px solid #f0c2d3;}
    label.inline input{width:auto;margin:2px 0 0;box-shadow:none}

    .summary{
      background:#fff;border-radius:16px;padding:14px;margin:6px 0;box-shadow:0 2px 8px rgba(196,69,122,.08);
      font-size:14px;line-height:1.5;white-space:pre-line;border:1px solid #f4d0dc;
    }
    .brand-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px;font-weight:500;}

    @media (max-width: 680px){
      body{display:block;background:var(--bg);}
      .app{width:100vw;height:100dvh;border-radius:0;box-shadow:none;border:0;}
      .chat{padding-left:10px;padding-right:10px;}
      .msg{max-width:88%;font-size:14.5px;}
      .panel{max-height:48dvh;}
    }