/*https://stackoverflow.com/questions/19400183/how-to-style-chat-bubble-in-iphone-classic-style-using-css-only*/
.messages {
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.message {
    border-radius: 20px;
    padding: 8px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

.yours {
    align-items: flex-start;
}

.yours .message {
    margin-right: 25%;
    background-color: white;
    position: relative;
}

.yours .message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: -7px;
    height: 20px;
    width: 20px;
    background: white;
    border-bottom-right-radius: 15px;
}

.yours .message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 20px;
    background-image: url('../imgs/seamless_reduced2.png');
    border-bottom-right-radius: 10px;
}

.mine {
    align-items: flex-end;
}

.mine .message {
    margin-left: 25%;
    background-color: #e1f6cb;
    position: relative;
}

.mine .message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: -8px;
    height: 20px;
    width: 20px;
    background-color: #e1f6cb;
    border-bottom-left-radius: 15px;
}

.mine .message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: -10px;
    width: 10px;
    height: 20px;
    background-image: url('../imgs/seamless_reduced2.png');
    border-bottom-left-radius: 10px;
}


/**
***    PRIMITIVE ZONE
**/
/*html {*/
/*    overflow: scroll;*/
/*    overflow-x: hidden;*/
/*}*/

/*body {*/
/*    background-image: url('../imgs/seamless_reduced2.png');*/
/*    height: 100%;*/
/*    width: 100%;*/
/*}*/

html {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Prevent page-level scrolling (all panels are internally scrollable).
       This avoids Safari's 1px top "bounce/scroll" gap artifact. */
    overflow: hidden;
    background-color: #ffffff;
    background-image: url('../imgs/seamless_reduced2.png');
    background-repeat: repeat;
    background-position: 0 0;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    /*background-color: #111;*/
    background-image: url('../imgs/seamless_reduced2.png');
    background-repeat: repeat;
    background-position: 0 0;
}
:root {
    --sidebar-w: 250px;
    --header-h: 50px;
    --main-top: 50px; /* aligns with your current header spacing */
    --footer-h: 60px;
}

:root { /* TAG-COLORS */
    --ver-color: #ff0000;
    --avv-color: #ff7700;
    --int-color: #e600ff;
    --con-color: #7c8900;
    --pre-color: #4fe000;
    --art-color: #119e30;
    --agg-color: #015ee0;
    --sos-color: #6f01d0;
    --pro-color: #009bf5;
    /* Unknown is black, not the grey the other uncoloured tags use. Grey reads
       as disabled -- as though the tagger had skipped the word rather than
       examined it and found no part of speech. Black says "plain text", which
       is what an unrecognised word is.
       It does mean an unknown word looks like a word whose category has been
       switched off in the settings modal: those fall back to black too. The
       ambiguity is deliberate -- both cases mean "no colour to show you". */
    --scn-color: #000000;
    --car-color: #5c5c5c;
    --pnc-color: #5c5c5c;
    --sym-color: #5c5c5c;
}

/**
***    HIDDEN MODALS' ZONE
**/
.modal-switches {
    margin-top: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #dddddd;
    padding: 4px 8px;
}

.modal-footer {
    margin-top: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #dddddd;
    padding: 6px 12px;
}

.modal-header {
    padding: 8px 16px;
}

.modal-body {
    padding: 8px 16px;
}

.custom-control {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* text colors */
.word_ver.pos_yes {
    color: var(--ver-color);
}

.word_avv.pos_yes {
    color: var(--avv-color);
}

.word_int.pos_yes {
    color: var(--int-color);
}

.word_con.pos_yes {
    color: var(--con-color);
}

.word_pre.pos_yes {
    color: var(--pre-color);
}

.word_art.pos_yes {
    color: var(--art-color);
}

.word_agg.pos_yes {
    color: var(--agg-color);
}

.word_sos.pos_yes {
    color: var(--sos-color);
}

.word_pro.pos_yes {
    color: var(--pro-color);
}

.word_scn.pos_yes {
    color: var(--scn-color);
}

.word_car.pos_yes {
    color: var(--car-color);
}

.word_pnc.pos_yes {
    color: var(--pnc-color);
}

.word_sym.pos_yes {
    color: var(--sym-color);
}

/* switches colors */
input[data-pos=ver].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ver-color);
}

input[data-pos=avv].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--avv-color);
}

input[data-pos=int].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--int-color);
}

input[data-pos=con].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--con-color);
}

input[data-pos=pre].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pre-color);
}

input[data-pos=art].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--art-color);
}

input[data-pos=agg].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--agg-color);
}

input[data-pos=sos].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sos-color);
}

input[data-pos=pro].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pro-color);
}

input[data-pos=scn].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--scn-color);
}

input[data-pos=scn].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--car-color);
}

input[data-pos=pnc].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pnc-color);
}

input[data-pos=sym].custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sym-color);
}


.word_ver, .word_avv, .word_int, .word_con, .word_pre, .word_art, .word_agg, .word_sos, .word_ent, .word_pro {
    color: black;
}


.unselectable {
    -webkit-touch-callout: none; /* iOS Safari*/
    -webkit-user-select: none; /* Safari*/
    /*-khtml-user-select: none; /*Konqueror HTML*/
    -moz-user-select: none; /* Old versions of Firefox*/
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox*/

}

/**
***    LEFT ZONE
**/
/*#left {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    right: calc(100% - 250px);*/
/*    bottom: 0;*/
/*    overflow: auto;*/
/*    background-color: #666666;*/
/*}*/

#left {
    position: absolute;
    left: 0;
    top: 0;
    right: calc(100% - var(--sidebar-w));
    bottom: 0;
    overflow: auto;
    background-color: #ffffff;
    border-right-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
}

/* Sidebar panels: history on the left, colour key and help on the right.
   Both columns are hidden below 1024px, so none of this needs a media query.
   Everything here is layout -- the legend takes its colours from
   .word_xxx.pos_yes, the same rules that paint the tokens, so the key cannot
   drift from what it describes. */
.sidebar-panel {
    padding: 14px 16px;
}

.sidebar-panel + .sidebar-panel {
    border-top: 1px solid #eeeeee;
}

/* One heading style for all three panels. .history-title is set in
   history_balloon_content(); scoping it here leaves the /history bubble's own
   heading alone. */
.sidebar-panel-title,
.sidebar-panel .history-title {
    display: block;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 10px;
}

.pos-legend-list {
    list-style: none;   /* scoped to this list: the help bubble keeps its bullets */
    margin: 0;
    padding: 0;
}

.pos-legend-list li {
    font-size: 14px;
    line-height: 1.9;
    /* A long name in German or Russian must not spill under the scrollbar. */
    overflow-wrap: break-word;
}

/* Help text, copied from the same source as the help bubble. It was written
   for a full-width bubble, so it needs tightening rather than restyling. */
.sidebar-help-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: #555555;
}

.sidebar-help-body ul {
    padding-left: 18px;
    margin: 6px 0;
}

.sidebar-help-body li {
    margin-bottom: 4px;
}

/* Entries can be a whole sentence. Two lines each keeps thirty of them
   scannable; the full text is in the title attribute. */
.sidebar-panel .history-item {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
}

/**
***    RIGHT ZONE
**/
/*#right {*/
/*    position: absolute;*/
/*    left: calc(100% - 250px);*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    overflow: auto;*/
/*    background-color: #666666*/
/*}*/

#right {
    position: absolute;
    left: calc(100% - var(--sidebar-w));
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: #ffffff;
    border-left-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
}


/**
***    HEADER ZONE
**/
#header {
    position: absolute;
    top: 0;
    padding: 0;
    left: var(--sidebar-w);
    height: var(--header-h);
    right: var(--sidebar-w);
    overflow: hidden;
    background-color: #ffffff;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

#parent {
    /*padding: 5px;*/
    height: var(--header-h);
}

#headline {
    padding: 4px;
    height: var(--header-h);
}

#logo1 {
    float: left;
    cursor: pointer;
}

#logo2 {
    display: none;
    float: left;
    cursor: pointer;
}

#italica_header {
    margin: 0;
    /*position: relative;*/
    font-family: "Helvetica", serif;
    font-size: 18px;
    font-weight: normal;
    color: navy;
    float: left;
}

#description1 {
    height: 35px;
    margin: 0;
    vertical-align: bottom;
    color: grey;
    font-family: "Helvetica", serif;
    font-size: 16px;
    font-weight: normal;
    float: left;
}

#description2 {
    display: none;
    height: 35px;
    margin: 0;
    vertical-align: bottom;
    color: grey;
    font-family: "Helvetica", serif;
    font-size: 16px;
    font-weight: normal;
    float: left;
}

#menu1 {
    height: 35px;
    margin: 0;
    vertical-align: bottom;
}

#menu2 {
    display: none;
    height: 35px;
    margin: 0;
    vertical-align: bottom;
}


/*style='color:navy; font-family: "Helvetica", serif; font-size: 36px; font-weight: normal;'*/

/*
PER CAMBIARE I COLORI DEL NAVIGATORE CAMBIARE PRIMA NELL'HTML LA CLASSE "NAVBAR" IN "NAVBAR-ITALICA"
*/

/*https://stackoverflow.com/questions/43381596/bootstrap-4-navbar-color*/
/* change the background color */
.navbar-italica {
    background-color: #4433cc;
    height: 100px;
    text-align: center;
    /*background-color: #55bca6; !* WA tone*!*/
}

/* change the brand and text color */
.navbar-italica .navbar-brand,
.navbar-italica .navbar-text {
    color: #000000;
    font-size: 48px !important;
    /*font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";*/
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", serif

}

/* change the link color */
.navbar-italica .navbar-nav .nav-link {
    color: #2b0fd2;
}

a:link {
    color: navy;
}

/* visited link */
a:visited {
    color: navy;
}

/* mouse over link */
a:hover {
    color: navy;
    text-decoration: none;
}

/* selected link */
a:active {
    color: navy;
}

/* change the color of active or hovered links */
.navbar-italica .nav-item.active .nav-link,
.navbar-italica .nav-item:focus .nav-link,
.navbar-italica .nav-item:hover .nav-link {
    color: pink;
}

/**
***    MAIN ZONE
**/

.main-container {
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
    /*    height: calc(100vh - 100px); /* space for fixed navbar (48px), "main" title (71px), footer (53px) */
    position: absolute;
    left: var(--sidebar-w);
    top: var(--main-top);
    right: var(--sidebar-w);
    bottom: var(--footer-h);
    overflow: auto;
    background-color: transparent;
}


/*.hidden-container {*/
/*    margin: 0 0 0;*/
/*    padding-left: 10px;*/
/*    padding-right: 10px;*/
/*    scrollbar-width: none; !* Firefox *!*/
/*    -ms-overflow-style: none;*/
/*    !*    height: calc(100vh - 100px); !* space for fixed navbar (48px), "main" title (71px), footer (53px) *!*/
/*    position: absolute;*/
/*    left: 250px;*/
/*    top: 0;*/
/*    right: 250px;*/
/*    bottom: 60px;*/
/*    border-color: #666666;*/
/*    overflow: auto;*/
/*    background-color: transparent;*/
/*}*/

/*.modal {*/
/*    !*width: 350px;*!*/
/*    !*margin: 0 auto;*!*/
/*    position: fixed;*/
/*    !*left: 50%;*!*/
/*    !*top: 50%;*!*/
/*    !*margin-left: -150px;*!*/
/*    !*margin-top: -150px;*!*/
/*    !*scrollbar-width: none; !* Firefox *!*!*/
/*}*/

.main-container::-webkit-scrollbar {
    display: none;
}

.click-handler{
    cursor: pointer;
}

/* Menu bubble rows, in the macOS idiom: no bullets, a fixed-width leading icon
   column so the labels align regardless of icon shape, and a translucent
   rounded highlight that only appears under the pointer.
   Scoped to .menu-list rather than `.content ul` on purpose -- the help bubble
   also uses <ul> and keeps its bullets. */
ul.menu-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}

.menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Fixed em width keeps every label on the same left edge even though the
   glyphs differ in advance width. */
.menu-row > i {
    width: 1.2em;
    text-align: center;
    font-size: 0.95em;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.menu-row:hover {
    background-color: rgba(120, 120, 128, 0.14);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}

.menu-row:hover > i {
    opacity: 1;
}

.menu-row:active {
    background-color: rgba(120, 120, 128, 0.22);
}

body[data-theme="dark"] .menu-row:hover {
    background-color: rgba(235, 235, 245, 0.13);
}

body[data-theme="dark"] .menu-row:active {
    background-color: rgba(235, 235, 245, 0.2);
}

/* Store badges. Centred column rather than two left-aligned images of
   different widths. Google's PNG carries roughly 9% transparent padding inside
   the artwork while Apple's SVG has none, so matching the <img> widths would
   render Google visibly smaller -- it gets a wider box and a negative margin
   to cancel the padding, leaving the two optically equal. */
.store-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px 0 2px 0;
}

.store-badges a {
    display: block;
    line-height: 0;
}

.store-badges img {
    display: block;
    height: auto;
}

/* The .badge-play rule was removed with the badge itself; see
   content/_storebadges.html for what to restore if the listing returns. */
.store-badges .badge-appstore img {
    width: 165px;
    border-radius: 8px;
    /* Was margin-top: 10px to clear the Play badge stacked above it. With one
       badge left there is nothing to clear, and the gap read as a stray
       indent under the heading. */
}

.adv {
    padding: 30px 100px;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    background-color: #f6f6f6;
}

.out_baloon {
    display: none;
    word-wrap: break-word;
    /*    border-radius: 50px 15px 15px 5px ;*/
    /*
        margin-right: 135px;
        border-radius: 15px 15px 15px 15px;
        background-color: white;
        padding: 10px;
        position: relative;
        border-style: solid;
        border-width: 1px;
        border-color: #aaaaaa;

        min-width: 500px;
    */
}

.content {
    display: none;
}

#in_baloon {
    display: none !important;
}

.in_baloon {

    /*
    background-color: #e1f6cb;
    margin-left: 135px;
    border-radius: 15px 15px 15px 15px;

    padding: 10px;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
    */

}

#out_baloon {
    display: none !important;
}

#out_baloon_welcome {
    top: 0;
}

.outtxt {
    /* background: aliceblue;*/
    /*width: 100%;*/
}

/* decored text */
.float-right {
    color: #888888;
    cursor: pointer;
}

.set-left {
    display: none
}

.text-token {
    cursor: pointer;
}

/* decored text */
.text-rect {
    min-width: 150px;
    word-wrap: break-word;
    color: #385391FF;
    /* Was 1.1em, then 1em, now 0.95em -- 15.2px against the browser's 16px
       default. This is the only place bubble text is sized: #output_message
       and #input_message are .text-rect themselves, so both sides of the
       conversation move together.

       It does NOT cover the POS table. italica.js:434 closes this div before
       appending the table, so .table is a SIBLING of .text-rect, not a child,
       and its em resolves against the bubble instead of against this rule.
       The two sizes have to be changed together -- see .table below. */
    font-size: 0.95em;
}

/* table of lists */
.table {
    margin-top: 10px;
    margin-bottom: 0;
    /*border-collapse:collapse;*/
    border-style: solid;
    border-width: 2px;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    width: 100%;
    /* Kept equal to .text-rect, which is what it was before either was
       reduced -- both were 1.1em. It is a sibling of .text-rect, not a
       descendant, so it does not inherit that reduction and has to be
       lowered by hand alongside it. */
    font-size: 0.95em;
    /*
        display: table;
        table-layout: fixed;

     */
}

.table tbody tr {
    cursor: pointer;
}

.table tbody tr td {
    padding: 3px
}

.table tbody tr td.td1 {
}

.table tbody tr td.td2 {
    white-space: nowrap;
}

.table tbody tr td.td3 {
    width: 100%;
    font-style: italic;
}

.table tbody tr td.td4 {
}

.icon-bug {
}

.icon-help {
}

.icon-done {
    display: none
}

/**
***    FOOTER ZONE
**/

/*.footer {*/

/*}*/

#footer {
    position: absolute;
    left: var(--sidebar-w);
    height: var(--footer-h);
    right: var(--sidebar-w);
    bottom: 0;
    overflow: visible;
    background-color: #f0f2f5;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}


/*.footer-area {*/
/*    width: 100%;*/
/*    height: 60px;*/
/*    border-color: red;*/
/*    color: #d41717;*/
/*}*/

textarea {
    resize: none;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

textarea::-webkit-scrollbar {
    display: none;
}

/* Deletes outlines when focused */
input[type="text"], textarea {
    outline: none;
    box-shadow: none !important;
    border: 1px solid #aaaaaa !important;
}

/*Directive to disable rounded corners*/
.footer-area {
    width: 100%;
    padding: 0 10px;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

#settings {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50% !important;
    padding: 0 !important;
    background-color: #e4e6eb !important;
    border: none !important;
    color: #555 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#intxt {
    flex: 1;
    height: auto !important;
    min-height: 44px;
    max-height: 52px;
    border-radius: 22px !important;
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    padding: 10px 16px !important;
    font-size: 1em;
    line-height: 1.4;
}

#send {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50% !important;
    padding: 0 !important;
    background-color: #007aff !important;
    border: none !important;
    color: #ffffff !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

button#settings, button#send {
    cursor: default;
}

button#settings .fa, button#send .fa {
    cursor: pointer;
    font-size: 20px;
    padding: 0;
}

.linkable {
    color: grey;
    font-size: 20px;
    cursor: pointer;
}

.linkable:hover {
    color: navy;
}

.slash-cmd {
    color: #385391FF;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.slash-cmd:hover {
    color: #2a3f6e;
}

.delete, .set-down, .set-left {
    font-size: 1.1em;
}

#qui_help, #qui_privacy, .delete, .set-down, .set-left{
    color: navy;
    cursor: pointer;
}

#qui_help:hover, #qui_privacy:hover, .delete:hover, .set-down:hover, .set-left:hover {
    color: navy;
}

.red-tooltip + .tooltip > .tooltip-inner {
    background-color: #f00;
}

.red-tooltip + .tooltip > .tooltip-arrow {
    border-bottom-color: #f00;
}

.languages {
   display: flex;
   justify-content: space-around;
}

/* Fade-in balloons */
.baloon-fade-in {
  animation: baloonFadeIn 350ms ease-out both;
  will-change: opacity, transform;
}

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

.baloon-fade-out {
  animation: baloonFadeOut 250ms ease-in both;
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .baloon-fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Token stagger fade-in — applies to both inline spans and table rows */
.token-fade-in {
  animation: tokenFadeIn 220ms ease-out both;
}

tr.token-fade-in {
  display: table-row;
}

@keyframes tokenFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Typing indicator (tre puntini animati) */
.typing-indicator-balloon .message {
  min-width: 80px;
}

.typing-indicator {
  padding: 4px 0;
  line-height: 1;
  white-space: nowrap;
}

.typing-indicator span {
  display: inline-block;
  width: 9px;
  height: 9px;
  background-color: #555555;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  animation: typingDot 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.3s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.6s; margin-right: 0; }

@keyframes typingDot {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%       { transform: translateY(-8px); opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .token-fade-in {
    animation: none;
    opacity: 1;
  }
  .typing-indicator span {
    animation: none;
    transform: none;
  }
}

/* History balloon */
.history-list {
  list-style: none;
  padding: 4px 0 0 0;
  margin: 0;
}

.history-item {
  padding: 5px 2px;
  cursor: pointer;
  border-bottom: 1px solid #eeeeee;
  font-size: 0.95em;
}

.history-item:last-child {
  border-bottom: none;
}

.history-item:hover {
  background-color: #f0f4ff;
  border-radius: 4px;
}

.history-empty {
  color: #aaaaaa;
  font-style: italic;
  padding: 4px 0;
}

/* Sits between the capped list and the clear button. Deliberately quieter
   than "Clear history": it is the ordinary way out of the panel, not a
   destructive action. */
.history-show-all {
  margin-top: 8px;
  font-size: 0.85em;
  color: #4a6fa5;
  cursor: pointer;
}

.history-show-all:hover {
  text-decoration: underline;
}

.history-clear-btn {
  margin-top: 8px;
  font-size: 0.85em;
  color: #cc4444;
  cursor: pointer;
  text-align: right;
}

.history-clear-btn:hover {
  text-decoration: underline;
}

/* ========== Dark theme ========== */

body[data-theme="dark"],
body[data-theme="dark"] html {
  background-color: #2c2c2c;
  background-image: none;
  color: #e0e0e0;
}

body[data-theme="dark"] #header {
  background-color: #383838;
  border-top-color: #444;
  border-bottom-color: #444;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

body[data-theme="dark"] #italica_header_mobile {
  color: #a0c0ff;
}

body[data-theme="dark"] .slash-cmd {
  color: #a0c0ff;
}

body[data-theme="dark"] .linkable {
  color: #e0e0e0;
}

body[data-theme="dark"] .linkable:hover {
  color: #a0c0ff;
}

body[data-theme="dark"] #menu1 .linkable,
body[data-theme="dark"] #menu2 .linkable {
  color: #e0e0e0;
}

body[data-theme="dark"] #menu1 .linkable:hover,
body[data-theme="dark"] #menu2 .linkable:hover {
  color: #a0c0ff;
}

body[data-theme="dark"] #footer {
  background-color: #383838;
  border-top-color: #444;
}

body[data-theme="dark"] #settings {
  background-color: #3a3a3a !important;
  color: #cccccc !important;
  border: 1px solid #666666 !important;
}

body[data-theme="dark"] #intxt {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

body[data-theme="dark"] #intxt::placeholder {
  color: #666;
}

body[data-theme="dark"] .main-container {
  background-color: #3d3d3d;
  background-image: none;
}

/* Answer bubbles were pure #ffffff against a #2c2c2c page -- the brightest
   possible surface in a dark theme, and the thing you look at most.
   #333333 is chosen for the POS palette's sake, not just for glare: these
   bubbles carry the colour-coded grammar tags, and a lighter surface forces
   those colours so pale that they stop being distinguishable from each other
   (see the TAG-COLORS override below). It sits close to .main-container
   (#3d3d3d), so the edge is drawn with a border rather than by contrast. */
body[data-theme="dark"] .yours .message {
  background-color: #333333;
  color: #ececec;
  border: 1px solid #4d4d4d;
}

body[data-theme="dark"] .yours .message.last:before {
  background: #333333;
}

body[data-theme="dark"] .yours .message.last:after {
  background-image: none;
  background-color: #2c2c2c;
}

body[data-theme="dark"] .mine .message {
  background-color: #e1f6cb;
  color: #222222;
}

body[data-theme="dark"] .mine .message.last:before {
  background-color: #e1f6cb;
}

body[data-theme="dark"] .mine .message.last:after {
  background-image: none;
  background-color: #2c2c2c;
}

/* Scoped per bubble side, because the two now have opposite surfaces: answer
   bubbles are dark (#333333) and need light text, while the user's own bubbles
   stay light green (#e1f6cb) and still need dark text. A single blanket rule
   cannot serve both -- it was navy, which the dark surface would swallow. */
body[data-theme="dark"] .yours .text-rect {
  color: #ececec;
}

body[data-theme="dark"] .mine .text-rect {
  color: #222222;
}

/* Links inside answer bubbles -- support and privacy both carry mailto links.
   The global a:link/a:visited/a:hover rules are navy, i.e. 1.27:1 here. */
body[data-theme="dark"] .yours .text-rect a,
body[data-theme="dark"] .yours .text-rect a:link,
body[data-theme="dark"] .yours .text-rect a:visited {
  color: #9fc3ff;
}

body[data-theme="dark"] .yours .text-rect a:hover,
body[data-theme="dark"] .yours .text-rect a:active {
  color: #c9dcff;
}

/* .slash-cmd has a dark colour but its :hover was left at the light #2a3f6e,
   which is 1.22:1 on the bubble -- the /history hint vanishes under the cursor. */
body[data-theme="dark"] .slash-cmd:hover {
  color: #c9dcff;
}

/* TAG-COLORS for dark mode.
   The :root palette is tuned for a white bubble and is unusable on a dark one:
   measured against #333333 the originals run 1.09:1 (sos) to 3.33:1, i.e. the
   grammar tags -- the entire point of the app -- become invisible.
   These are not simply lightened. Lightening alone satisfies contrast but
   collapses the palette: the agg/pro blues fall from ΔE 39 apart to 13, and
   pre/art and int/sos likewise, so verb-vs-adverb stops being readable at a
   glance. Each colour here keeps its hue within 10 degrees (the hue carries the
   meaning) while lightness and saturation were solved jointly for >=4.5:1 on
   the bubble AND maximum mutual separation. Result: min pairwise deltaE 41.4,
   above the light theme's own 33.4.
   Changing the answer-bubble background means redoing this. */
body[data-theme="dark"] {
  --ver-color: #ff6d57;
  --avv-color: #e4950c;
  --int-color: #f94dff;
  --con-color: #97a22f;
  --pre-color: #4be006;
  --art-color: #6fc891;
  --agg-color: #389fff;
  --sos-color: #d892f6;
  --pro-color: #33d2fa;
  --scn-color: #dedede;
  --car-color: #dedede;
  --pnc-color: #dedede;
  --sym-color: #dedede;
}

/* Bubble controls: the delete "x" and the per-row expand/collapse chevrons are
   `color: navy` for the light theme, which measures 1.27:1 on the dark answer
   bubble -- present in the DOM, invisible on screen.
   Scoped to .yours deliberately: the user's own bubbles stay light green, where
   navy is correct at 13.9:1. A blanket override would break them. */
body[data-theme="dark"] .yours .delete,
body[data-theme="dark"] .yours .set-down,
body[data-theme="dark"] .yours .set-left {
  color: #a8b3c4;
}

/* Muted at rest so they do not compete with the analysis, brightening on hover.
   The light theme has no hover state here; these controls need one more when
   they start from a low-key colour. */
body[data-theme="dark"] .yours .delete:hover,
body[data-theme="dark"] .yours .set-down:hover,
body[data-theme="dark"] .yours .set-left:hover {
  color: #e8eefb;
}

/* .word_* without .pos_yes is hard-coded `color: black` for the light theme. */
body[data-theme="dark"] .word_ver,
body[data-theme="dark"] .word_avv,
body[data-theme="dark"] .word_int,
body[data-theme="dark"] .word_con,
body[data-theme="dark"] .word_pre,
body[data-theme="dark"] .word_art,
body[data-theme="dark"] .word_agg,
body[data-theme="dark"] .word_sos,
body[data-theme="dark"] .word_ent,
body[data-theme="dark"] .word_pro {
  color: #ececec;
}

body[data-theme="dark"] .token-row td {
  color: #e0e0e0;
}

body[data-theme="dark"] .modal-content {
  background-color: #383838;
  color: #e0e0e0;
  border-color: #444;
}

body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-footer {
  border-color: #444;
}

body[data-theme="dark"] .modal-switches {
  border-color: #444;
}

body[data-theme="dark"] .custom-control-label {
  color: #e0e0e0;
}

body[data-theme="dark"] .close {
  color: #aaaaaa;
}

body[data-theme="dark"] .history-item {
  border-bottom-color: #333;
}

body[data-theme="dark"] .history-item:hover {
  background-color: #2a3a4a;
}

/* #666 was legible while answer bubbles were white; on #333333 it is 2.20:1. */
body[data-theme="dark"] .history-empty {
  color: #a5a5a5;
}

/* Generated by history_balloon_content() into a .yours bubble. Its light-theme
   #cc4444 measures 2.69:1 there. */
body[data-theme="dark"] .history-clear-btn {
  color: #ff8f8f;
}

body[data-theme="dark"] table {
  color: #e0e0e0;
}

/* The side bars are styled by #left / #right -- ID selectors. This rule used to
   target .left / .right, which are classes, so the light #ffffff always won on
   specificity and the bars stayed white in dark mode. Match the ID selectors
   and the borders, which were also left at the light #aaaaaa. */
body[data-theme="dark"] #left,
body[data-theme="dark"] #right {
  background-color: #262626;
  background-image: none;
  border-color: #444;
}

/* The logo is a transparent PNG in the brand navy #385391, which is too close
   to the dark header to read. Lift it while keeping the colour: the previous
   saturate(0.8) desaturated as it brightened, leaving it washed out. */
body[data-theme="dark"] #logo1 img,
body[data-theme="dark"] #logo2 img {
  filter: brightness(1.35) saturate(1.1);
}

/* Desktop wordmark. Only the _mobile variant was being recoloured, so this one
   stayed color: navy against #383838. */
body[data-theme="dark"] #italica_header {
  color: #a0c0ff;
}

/* The same index.html is served to the iOS WebView, where a "download the
   app" bubble makes no sense. body.italica-ios is set on load by the
   $(document).ready block in italica.js. */
body.italica-ios .native-hide {
    display: none;
}